CSS:scroll-snap滚动事件停止及元素位置检测

更新日期: 2019-05-24阅读: 2.7k标签: 滚动

一、Scroll Snap是前端必备技能

css Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。

而且CSS Scroll Snap的兼容性非常好,移动端几乎可以放心使用。

技术图片


二、源自实际项目的scroll-snap场景

今天下午在实现一个功能需求的时候,正好遇到一个场景非常适合使用Scroll Snap来实现,滑动依次显示人物角色。于是就大胆使用了下,哇,好棒,无需任何js做边界判断,滑动停止自动定位到想要的位置。

关键CSS代码如下:

ul {
    width: 375px; height: 667px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    overflow-y: hidden;    
}
li {
    display: inline-block;
    width: 100%; height: 100%;
    scroll-snap-align: center;
}

滚动父容器元素设置scroll-snap-type:x mandatory,水平滚动,强制定位,子列表元素设置scroll-snap-align:center让列表在滚动容器的中间显示,于是效果达成。

然而,滚动定位结束后,还需要需要高亮当前定位的人物素材。我发现有些难办了!

?以前这种滑动效果用JS实现,无论是JS动画结束,还是CSS动画结束,都是有回调函数可以使用的。但是这里却是滚动,而且滚动后还会自己再定位一会儿,自己定位时间有长有短,谁知道什么时候停止?有时候一口气滑多个元素,也不确定到底停止在哪个元素上。

实际上,标准制定者们和浏览器厂商正在积极推进Scroll Snap相关回调事件的落地,这样可以精确知道滚到什么时候停止以及滚动定位到哪个元素上,但是,标准还在折腾,浏览器还没有支持。项目现在就要用,怎么办呢?

对!肯定要出动JS辅助。

实际上,就算不是Scroll Snap的使用场景,就算是普通的滚动,由于滚动具有惯性,检测滚动是否停止也是一个经常会遇到的需求。因此,有必要捋一个检测滚动什么时候停止的方法。


三、我的滚动中止检测方法

检测元素的滚动是否停止,我的实现思路是这样的,在滚动事件中跑一个定时器,记录当前时间的滚动距离和上一次滚动的距离是否相等,如果相等则认为滚动已经停止,如果不相等,则认为滚动依然在进行。

用JavaScript示意就是(这个实现已作废):

// 定时器,用来检测水平滚动是否结束
var timer = null;
// 上一次滚动的距离
var scrollLeft = 0, scrollTop = 0;
// 滚动事件开始
container.addEventListener(‘scroll‘, function () {
    clearInterval(timer);
    // 重新新的定时器
    timer = setInterval(function () {
        if (container.scrollLeft == scrollLeft && container.scrollTop == scrollTop) {
            // 滚动距离相等,认为停止滚动了
            clearInterval(timer);
            // ... 做你想做的事情,如回调处理
        } else {
            // 否则,依然记住上一次滚动位置
            scrollLeft = container.scrollLeft;
            scrollTop = container.scrollTop;
        }
    }, 100);
});

如果你有兴趣,可以对上面代码进行进一步封装。

更新于翌日

滚动终止检测可以无需判断前后滚动距离是否相等,因为无论是惯性还是Snap定位scroll事件也是持续触发的。因此,可以直接这样:

// 定时器,用来检测水平滚动是否结束
var timer = null;
// 滚动事件开始
container.addEventListener(‘scroll‘, function () {
    clearTimeout(timer);
    // 重新新的定时器
    timer = setTimeout(function () {
        // 无滚动事件触发,认为停止滚动了
        // ... 做你想做的事情,如回调处理
    }, 100);
});

当然,上面提供的方法并不是非常精准的中止检测,因为Scroll Snap最后的重定位浏览器自身有个检测,这个检测事件,根据我的反复研究与测试,应该是350ms(实际运行可能会略微大几毫秒),远比上面设置的100ms要大,因此,会有一次错误的冗余判断,发生在Snap定位开始之前。

我想了想,这个问题无法避免,但也不是什么大问题。总不可能设置400ms检测,延迟太高,体验不一定好。


四、当前滚动目标元素检测方法

原理如下,遍历所有的列表元素,检测列表元素的左边缘相对于滚动容器左边缘(如果是左对齐-scroll-snap-align:left)或中心(居中对齐)或右边缘(右对齐)的位置。当然,如果列表元素尺寸和滚动容器尺寸一致,则左中右边缘检测都可以。

JS示意:

[].slice.call(container.children).forEach(function (ele, index) {
    if (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) {
        // 此刻的ele元素就是当前定位的元素
        // ... 你可以对ele做你想做的事情
    } else {
        // 此刻的ele元素不是当前定位的元素
    }
});

严格来讲,应该计算是否等于0,而不是小于10,这里嘛,加了点容错区间吧。

搞定了上面2个需要JS辅助的需求点,最终的效果就出来了。


链接: https://www.fly63.com/article/detial/3422

BetterScroll移动端滚动场景的应用

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件,有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能。better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。

css隐藏滚动条_基于webkit内容隐藏滚动条的方法总汇

基于webkit内容隐藏滚动条,核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0。

原生js判断加载更多事件,通过获取页面滚动距离、文档总高度、浏览器视口高度

原生js获取滚动条在Y轴上的滚动距离、获取文档的总高度、获取浏览器视口的高度的方法实现,用于判断页面加载数据。

基于iScroll实现内容滚动

iScroll 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。

js+css 实现 滚动条滑动时显示,不滑动时隐藏

把原有的滚动条隐藏,创建个新的滚动条,并拓展其宽度,达到隐藏的效果,而判断滚动条是否滚动,保存原有的滚动条到顶部的距离,看是否发生改变,做出相应的判断。

js如何实现滚动到一定位置将内容固定在页面顶部

window.onscroll为滚轮监听,document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值,原因不明,若为0则会跟上方有空隙。左右位置虽然是0也要设,不然若为不是100%宽度的内容会出现左右跳动。

无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下

原生js获取浏览器获X轴,Y轴的滚动距离

在前端开发中,需要获取浏览器滚动距离的需求,这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴,Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识,希望对你有所帮助。

js实现返回顶部效果的方法总结

当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个返回顶部的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。

使用CSS实现无滚动条滚动

我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题,但是并不能很好的解决我们的问题,那么怎么办呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!