首页 >> js开发 >> jsvue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)js大全
jsvue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
1、是否滚动到底部1、是否滚动到底部
isScrollBottom() {
// 是否滚动到了底部
this.box = this.$refs.chatListWrapper
var clientHeight = this.box.clientHeight
var scrollTop = this.box.scrollTop
var scrollHeight = this.box.scrollHeight
if (scrollTop + clientHeight == scrollHeight) {
this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮
this.isBottom = true
this.isTop = false
} else {
this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮
this.isTop = false
this.isBottom = false
if (scrollTop == 0) {
this.isTop = true
}
}
},
isScrollBottom() {
// 是否滚动到了底部
this.box = this.$refs.chatListWrapper
var clientHeight = this.box.clientHeight
var scrollTop = this.box.scrollTop
var scrollHeight = this.box.scrollHeight
if (scrollTop + clientHeight == scrollHeight) {
this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮
this.isBottom = true
this.isTop = false
} else {
this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮
this.isTop = false
this.isBottom = false
if (scrollTop == 0) {
this.isTop = true
}
}
},2、scroll滚动方向判断2、scroll滚动方向判断
getDirection() {
// scroll滚动方向~~~~
this.box = this.$refs.chatListWrapper
var scrollTop = this.box.scrollTop
var scroll = scrollTop - this.initTop
this.initTop = scrollTop
let dir = 'down'
if (scroll < 0) {
dir = 'up'
} else {
dir = 'down'
}
return dir
},
getDirection() {
// scroll滚动方向~~~~
this.box = this.$refs.chatListWrapper
var scrollTop = this.box.scrollTop
var scroll = scrollTop - this.initTop
this.initTop = scrollTop
let dir = 'down'
if (scroll < 0) {
dir = 'up'
} else {
dir = 'down'
}
return dir
},3、滚动节流3、滚动节流1)、在滚动的dom上绑定scroll事件,监听滚动
2)、data中定义:fnScroll: () => {}, 初始值
3)、mounted中给fnScroll函数赋值,_.throttle实现滚动节流fnScroll: () => {},
this.fnScroll = _.throttle(() => {
}, 500)
this.fnScroll = _.throttle(() => {
}, 500)4、获取滚动可视区域内dom:4、获取滚动可视区域内dom:实现注意:判断当前元素是否在可视区域内,若在则存到isSeeDomArr中,然后循环isSeeDomArr数组,拿到当前可视区域内的最后一个dom,再去判断是否更新对应的咨询轨迹。
不要滚动时就去更新,这样会造成不停请求更新,最后一次请求可能无效,造成数据的错乱
sendRead() {
const chatLi = document
.getElementById('chat_list_wrapper')
.getElementsByTagName('li')
var container = this.$refs.chatListWrapper
var swHeight = container.clientHeight
const scrollTop = container.scrollTop
const aa = swHeight + scrollTop
let isSeeDomArr = []
for (let j = 0; j < chatLi.length; j++) {
if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {
isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr
}
}
if (isSeeDomArr.length) {
// 非 ceo接诊台更新消息的已读状态
if (this.$route.path.indexOf('diagnose/ceo') === -1) {
for (let m = 0; m < isSeeDomArr.length; m++) {
const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')
const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')
const msgType = isSeeDomArr[m].getAttribute('msgType')
if (!isSelfSend && !msgStatus && msgType !== 'notice') {
const _id = isSeeDomArr[m].getAttribute('id')
this.sendReadApi(_id)
}
}
}
// 更新聊天对应的咨询轨迹
this.setCurrentFdAsk(
isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')
)
}
},
sendRead() {
const chatLi = document
.getElementById('chat_list_wrapper')
.getElementsByTagName('li')
var container = this.$refs.chatListWrapper
var swHeight = container.clientHeight
const scrollTop = container.scrollTop
const aa = swHeight + scrollTop
let isSeeDomArr = []
for (let j = 0; j < chatLi.length; j++) {
if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {
isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr
}
}
if (isSeeDomArr.length) {
// 非 ceo接诊台更新消息的已读状态
if (this.$route.path.indexOf('diagnose/ceo') === -1) {
for (let m = 0; m < isSeeDomArr.length; m++) {
const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')
const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')
const msgType = isSeeDomArr[m].getAttribute('msgType')
if (!isSelfSend && !msgStatus && msgType !== 'notice') {
const _id = isSeeDomArr[m].getAttribute('id')
this.sendReadApi(_id)
}
}
}
// 更新聊天对应的咨询轨迹
this.setCurrentFdAsk(
isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')
)
}
},the end:滚动加载这些判断前前后后改了好多次,这次终于感觉逻辑比较清晰了,也算对自己有个交代。。。
isScrollBottom() {
// 是否滚动到了底部
this.box = this.$refs.chatListWrapper
var clientHeight = this.box.clientHeight
var scrollTop = this.box.scrollTop
var scrollHeight = this.box.scrollHeight
if (scrollTop + clientHeight == scrollHeight) {
this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮
this.isBottom = true
this.isTop = false
} else {
this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮
this.isTop = false
this.isBottom = false
if (scrollTop == 0) {
this.isTop = true
}
}
},
isScrollBottom() {
// 是否滚动到了底部
this.box = this.$refs.chatListWrapper
var clientHeight = this.box.clientHeight
var scrollTop = this.box.scrollTop
var scrollHeight = this.box.scrollHeight
if (scrollTop + clientHeight == scrollHeight) {
this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮
this.isBottom = true
this.isTop = false
} else {
this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮
this.isTop = false
this.isBottom = false
if (scrollTop == 0) {
this.isTop = true
}
}
},2、scroll滚动方向判断2、scroll滚动方向判断
getDirection() {
// scroll滚动方向~~~~
this.box = this.$refs.chatListWrapper
var scrollTop = this.box.scrollTop
var scroll = scrollTop - this.initTop
this.initTop = scrollTop
let dir = 'down'
if (scroll < 0) {
dir = 'up'
} else {
dir = 'down'
}
return dir
},
getDirection() {
// scroll滚动方向~~~~
this.box = this.$refs.chatListWrapper
var scrollTop = this.box.scrollTop
var scroll = scrollTop - this.initTop
this.initTop = scrollTop
let dir = 'down'
if (scroll < 0) {
dir = 'up'
} else {
dir = 'down'
}
return dir
},3、滚动节流3、滚动节流1)、在滚动的dom上绑定scroll事件,监听滚动
2)、data中定义:fnScroll: () => {}, 初始值
3)、mounted中给fnScroll函数赋值,_.throttle实现滚动节流fnScroll: () => {},
this.fnScroll = _.throttle(() => {
}, 500)
this.fnScroll = _.throttle(() => {
}, 500)4、获取滚动可视区域内dom:4、获取滚动可视区域内dom:实现注意:判断当前元素是否在可视区域内,若在则存到isSeeDomArr中,然后循环isSeeDomArr数组,拿到当前可视区域内的最后一个dom,再去判断是否更新对应的咨询轨迹。
不要滚动时就去更新,这样会造成不停请求更新,最后一次请求可能无效,造成数据的错乱
sendRead() {
const chatLi = document
.getElementById('chat_list_wrapper')
.getElementsByTagName('li')
var container = this.$refs.chatListWrapper
var swHeight = container.clientHeight
const scrollTop = container.scrollTop
const aa = swHeight + scrollTop
let isSeeDomArr = []
for (let j = 0; j < chatLi.length; j++) {
if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {
isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr
}
}
if (isSeeDomArr.length) {
// 非 ceo接诊台更新消息的已读状态
if (this.$route.path.indexOf('diagnose/ceo') === -1) {
for (let m = 0; m < isSeeDomArr.length; m++) {
const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')
const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')
const msgType = isSeeDomArr[m].getAttribute('msgType')
if (!isSelfSend && !msgStatus && msgType !== 'notice') {
const _id = isSeeDomArr[m].getAttribute('id')
this.sendReadApi(_id)
}
}
}
// 更新聊天对应的咨询轨迹
this.setCurrentFdAsk(
isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')
)
}
},
sendRead() {
const chatLi = document
.getElementById('chat_list_wrapper')
.getElementsByTagName('li')
var container = this.$refs.chatListWrapper
var swHeight = container.clientHeight
const scrollTop = container.scrollTop
const aa = swHeight + scrollTop
let isSeeDomArr = []
for (let j = 0; j < chatLi.length; j++) {
if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {
isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr
}
}
if (isSeeDomArr.length) {
// 非 ceo接诊台更新消息的已读状态
if (this.$route.path.indexOf('diagnose/ceo') === -1) {
for (let m = 0; m < isSeeDomArr.length; m++) {
const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')
const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')
const msgType = isSeeDomArr[m].getAttribute('msgType')
if (!isSelfSend && !msgStatus && msgType !== 'notice') {
const _id = isSeeDomArr[m].getAttribute('id')
this.sendReadApi(_id)
}
}
}
// 更新聊天对应的咨询轨迹
this.setCurrentFdAsk(
isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')
)
}
},the end:滚动加载这些判断前前后后改了好多次,这次终于感觉逻辑比较清晰了,也算对自己有个交代。。。
相关文章:
- JavaScriptthree.js欧拉角和四元数的使用方法
- js代码从0到1学习JavaScript编写贪吃蛇游戏
- js解决vue的router组件component在import时不能使用变量问题js大全
- js在vue中使用防抖函数组件操作js大全
- jsVue中的this.$options.data()和this.$data用法说明js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js解决vuex数据页面刷新后初始化操作js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全