原来不用better-scroll插件vue也能实现吸顶效果

最新推荐文章于 2021-12-31 15:13:09 发布

青椒切小块

最新推荐文章于 2021-12-31 15:13:09 发布

阅读量973

点赞数

原文链接：https://www.jianshu.com/p/5fc421a2f12a

版权

原来不用better-scroll就可以实现吸顶功能，之前还一直以为，必须要用呢，面试被稳得晕头转向的

scroll事件:

文档视图或者一个元素在滚动时，会触发元素的scroll事件。

注意：在 iOS UIWebViews中，滚动进行时不会触发 scroll 事件；只有当滚动结束后事件才会被触发。参见 Bootstrap issue #16202。Safari 和 WKWebViews 则没有这个问题。

Scroll 事件节流

由于 scroll 事件可被高频触发，事件处理程序不应该执行高性能消耗的操作，如DOM操作。而更推荐的做法是使用 requestAnimationFrame(), setTimeout() 或 CustomEvent 给事件节流，如下所述。

然而需要注意的是，输入事件和动画帧常常以差不多的频率被触发，因此以下优化常常不必要。这个例子使用 requestAnimationFrame 优化 scroll 事件。

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // 根据滚动位置做的事
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

Vue.js中this.$nextTick()的使用

https://www.cnblogs.com/jin-zhe/p/9985436.html

吸顶实现

<script rel="script" src="vue.js"></script>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>...</li>
</ul>
<ul class="box_fixed" id="boxFixed" :class="{'is_fixed' : isFixed}"></ul>
<ul>
    <li>111</li>
    <li>剩下的为了实现滚动效果自己补充几个就行了，放在这里看着太麻烦了</li>
</ul>
<script>
    var vm = new Vue({
        el : '#boxFixed',
        data() {
            return {
                isFixed: false,
                offsetTop: 0
            }
        },
        mounted() {
            window.addEventListener('scroll', this.initHeight);//addEventListener用于向指定元素添加事件句柄
            this.$nextTick(() => {
                //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
                this.offsetTop = document.querySelector('#boxFixed').offsetTop;
                console.log(this.offsetTop);
            })
        },
        methods: {
            initHeight() {
                // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
                console.log(scrollTop);
                this.isFixed = scrollTop > this.offsetTop ? true : false;
            },
        }
    });

</script>
</body>
<style>
    li{
        width: 500px;
        height: 40px;
        margin: 0 auto;
        line-height: 40px;
    }
    .box_fixed{
        width: 500px;
        height: 40px;
        border: 2px dashed pink;
        border-radius: 20px;
        margin: 0 auto;
        line-height: 40px;
        background: #eeeeee;
    }
    .is_fixed{
        position: fixed;
        top: 0;
        left: 400px;
        z-index: 999;
    }
</style>

滚动前：
在这里插入图片描述
滚动后吸顶：

参考：https://www.jianshu.com/p/5fc421a2f12a

青椒切小块

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原来不用better-scroll插件vue也能实现吸顶效果

原来不用better-scroll就可以实现吸顶功能，之前还一直以为，必须要用呢，面试被稳得晕头转向的scroll事件:文档视图或者一个元素在滚动时，会触发元素的scroll事件。注意：在 iOS UIWebViews中，滚动进行时不会触发 scroll 事件；只有当滚动结束后事件才会被触发。参见 Bootstrap issue #16202。Safari 和 WKWebViews 则没有这个问题。Scroll 事件节流由于 scroll 事件可被高频触发，事件处理程序不应该执行高性能消耗的
复制链接

扫一扫