html 滚动条停止事件,CSS scroll-snap滚动事件停止及元素位置检测实现
一、Scroll Snap是前端必備技能
CSS Scroll Snap是個(gè)非常好用的特性，可以讓網(wǎng)頁(yè)容器滾動(dòng)停止的時(shí)候，無(wú)需任何JS代碼的參與，瀏覽器可以自動(dòng)平滑定位到指定元素的指定位置。類似幻燈片廣告效果就可以純CSS實(shí)現(xiàn)。
而且CSS Scroll Snap的兼容性非常好，移動(dòng)端幾乎可以放心使用。
二、源自實(shí)際項(xiàng)目的scroll-snap場(chǎng)景
今天下午在實(shí)現(xiàn)一個(gè)功能需求的時(shí)候，正好遇到一個(gè)場(chǎng)景非常適合使用Scroll Snap來(lái)實(shí)現(xiàn)，滑動(dòng)依次顯示人物角色。于是就大膽使用了下，哇，好棒，無(wú)需任何js做邊界判斷，滑動(dòng)停止自動(dòng)定位到想要的位置。
關(guān)鍵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;
}
滾動(dòng)父容器元素設(shè)置 scroll-snap-type:x mandatory ，水平滾動(dòng)，強(qiáng)制定位，子列表元素設(shè)置 scroll-snap-align:center 讓列表在滾動(dòng)容器的中間顯示，于是效果達(dá)成。
然而，滾動(dòng)定位結(jié)束后，還需要需要高亮當(dāng)前定位的人物素材。我發(fā)現(xiàn)有些難辦了！
以前這種滑動(dòng)效果用JS實(shí)現(xiàn)，無(wú)論是JS動(dòng)畫結(jié)束，還是CSS動(dòng)畫結(jié)束，都是有回調(diào)函數(shù)可以使用的。但是這里卻是滾動(dòng)，而且滾動(dòng)后還會(huì)自己再定位一會(huì)兒，自己定位時(shí)間有長(zhǎng)有短，誰(shuí)知道什么時(shí)候停止？有時(shí)候一口氣滑多個(gè)元素，也不確定到底停止在哪個(gè)元素上。
實(shí)際上，標(biāo)準(zhǔn)制定者們和瀏覽器廠商正在積極推進(jìn)Scroll Snap相關(guān)回調(diào)事件的落地，這樣可以精確知道滾到什么時(shí)候停止以及滾動(dòng)定位到哪個(gè)元素上，但是，標(biāo)準(zhǔn)還在折騰，瀏覽器還沒(méi)有支持。項(xiàng)目現(xiàn)在就要用，怎么辦呢？
對(duì)！肯定要出動(dòng)JS輔助。
實(shí)際上，就算不是Scroll Snap的使用場(chǎng)景，就算是普通的滾動(dòng)，由于滾動(dòng)具有慣性，檢測(cè)滾動(dòng)是否停止也是一個(gè)經(jīng)常會(huì)遇到的需求。因此，有必要捋一個(gè)檢測(cè)滾動(dòng)什么時(shí)候停止的方法。
三、我的滾動(dòng)中止檢測(cè)方法
檢測(cè)元素的滾動(dòng)是否停止，我的實(shí)現(xiàn)思路是這樣的，在滾動(dòng)事件中跑一個(gè)定時(shí)器，記錄當(dāng)前時(shí)間的滾動(dòng)距離和上一次滾動(dòng)的距離是否相等，如果相等則認(rèn)為滾動(dòng)已經(jīng)停止，如果不相等，則認(rèn)為滾動(dòng)依然在進(jìn)行。
用JavaScript示意就是( 這個(gè)實(shí)現(xiàn)已作廢 )：
// 定時(shí)器，用來(lái)檢測(cè)水平滾動(dòng)是否結(jié)束
var timer = null;
// 上一次滾動(dòng)的距離
var scrollLeft = 0, scrollTop = 0;
// 滾動(dòng)事件開始
container.addEventListener('scroll', function () {
clearInterval(timer);
// 重新新的定時(shí)器
timer = setInterval(function () {
if (container.scrollLeft == scrollLeft && container.scrollTop == scrollTop) {
// 滾動(dòng)距離相等，認(rèn)為停止?jié)L動(dòng)了
clearInterval(timer);
// ... 做你想做的事情，如回調(diào)處理
} else {
// 否則，依然記住上一次滾動(dòng)位置
scrollLeft = container.scrollLeft;
scrollTop = container.scrollTop;
}
}, 100);
});
如果你有興趣，可以對(duì)上面代碼進(jìn)行進(jìn)一步封裝。
更新于翌日
滾動(dòng)終止檢測(cè)可以無(wú)需判斷前后滾動(dòng)距離是否相等，因?yàn)闊o(wú)論是慣性還是Snap定位scroll事件也是持續(xù)觸發(fā)的。因此，可以直接這樣：
// 定時(shí)器，用來(lái)檢測(cè)水平滾動(dòng)是否結(jié)束
var timer = null;
// 滾動(dòng)事件開始
container.addEventListener('scroll', function () {
clearTimeout(timer);
// 重新新的定時(shí)器
timer = setTimeout(function () {
// 無(wú)滾動(dòng)事件觸發(fā)，認(rèn)為停止?jié)L動(dòng)了
// ... 做你想做的事情，如回調(diào)處理
}, 100);
});
當(dāng)然，上面提供的方法并不是非常精準(zhǔn)的中止檢測(cè)，因?yàn)镾croll Snap最后的重定位瀏覽器自身有個(gè)檢測(cè)，這個(gè)檢測(cè)事件，根據(jù)我的反復(fù)研究與測(cè)試，應(yīng)該是 350ms (實(shí)際運(yùn)行可能會(huì)略微大幾毫秒)，遠(yuǎn)比上面設(shè)置的 100ms 要大，因此，會(huì)有一次錯(cuò)誤的冗余判斷，發(fā)生在Snap定位開始之前。
我想了想，這個(gè)問(wèn)題無(wú)法避免，但也不是什么大問(wèn)題。總不可能設(shè)置 400ms 檢測(cè)，延遲太高，體驗(yàn)不一定好。
四、當(dāng)前滾動(dòng)目標(biāo)元素檢測(cè)方法
原理如下，遍歷所有的列表元素，檢測(cè)列表元素的左邊緣相對(duì)于滾動(dòng)容器左邊緣(如果是左對(duì)齊- scroll-snap-align:left )或中心(居中對(duì)齊)或右邊緣(右對(duì)齊)的位置。當(dāng)然，如果列表元素尺寸和滾動(dòng)容器尺寸一致，則左中右邊緣檢測(cè)都可以。
JS示意：
[].slice.call(container.children).forEach(function (ele, index) {
if (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) {
// 此刻的ele元素就是當(dāng)前定位的元素
// ... 你可以對(duì)ele做你想做的事情
} else {
// 此刻的ele元素不是當(dāng)前定位的元素
}
});
嚴(yán)格來(lái)講，應(yīng)該計(jì)算是否等于 0 ，而不是小于 10 ，這里嘛，加了點(diǎn)容錯(cuò)區(qū)間吧。
搞定了上面2個(gè)需要JS輔助的需求點(diǎn)，最終的效果就出來(lái)了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的html 滚动条停止事件,CSS scroll-snap滚动事件停止及元素位置检测实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： A4免费“升级”为A5？奥迪CEO确认：
- 下一篇： wordpress文章添加css样式,给