难搞的滚动事件(滚动默认，scrollTop)

Posted 2023-04-22

参考技术A

现今的 chrome 浏览器，为了实现丝滑顺畅地滑动，活动时间直接执行而不再检测默认事件，这使得无法用 e.preventDafult() 来阻止默认事件。

现在需要添加 passive: false 配置

$(document).addEventListener( \'scroll\', fun, passive: false ) 把事件被动监听设置为 false 之后，就可以正常阻止默认事件了。

为了手动地使页面平滑滚动到某个高度，需要使用 $.animate(scrollTop: val) 。由于不同浏览器间的差异，绑定 scrollTop 的 DOM 元素是不一样的，比如

为了解决这个差异，我们需要把 animate 同时绑定在两个节点上。 $(\'html, body\').animate()

$().position() ———— 基于父元素，从自身的外边框为点。
$().offset() ———— 基于父元素，从自身内容为点。
$(window).height().width() ———— 获取窗口宽高。

因为使用的是监听 touchstar 和 touchend 方法，所以该方法只适用于移动端。

主要的思路就是监听“触摸开始”和“触摸结束”两个事件，分别获取事件当前的触摸点坐标和文档滚动的值，进行对比判断“触摸是否有滑动”以及“文档是否有滚动（到底）”，来执行需要的方法。下面说说几个注意点：

VUE 实现监听滚动事件，实现数据懒加载

methods: {
    // 获取滚动条当前的位置
    getScrollTop() {
        let scrollTop = 0
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop
        } else if (document.body) {
            scrollTop = document.body.scrollTop
        }
        return scrollTop
    },
    // 获取当前可视范围的高度
    getClientHeight() {
        let clientHeight = 0
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
        }
        return clientHeight
    },

    // 获取文档完整的高度
    getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
    },
    // 滚动事件触发下拉加载
    onScroll() {
        if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 0) {
            if (this.status <= 5) {
                this.status++;
                // 调用请求函数
                this.axios.get(‘url‘
                ).then(data => {
                    console.log(data)
                });
            } 
        }
    },
}

监听事件

mounted() {
    this.$nextTick(function () { // 解决视图渲染，数据未更新
        window.addEventListener(‘scroll‘, this.onScroll); 
    })
}