CSS scroll

日期:2021-02-28 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

1、Scroll Snap是前端开发必备专业技能

CSS Scroll Snap是个十分功能强大的特点,可让网页页面器皿翻转终止的情况下,不用任何JS编码的参加,访问器能够全自动光滑精准定位到特定元素的特定部位。相近幻灯片广告宣传实际效果便可以纯CSS完成。

并且CSS Scroll Snap的适配性十分好,挪动端基本上能够安心应用。

 

2、源自具体新项目的scroll-snap情景

今日中午在完成1个作用要求的情况下,恰好遇到1个情景十分合适应用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动漫完毕,全是有回调函数涵数可使用的。可是这里确是翻转,并且翻转后还会自身再精准定位1会儿,自身精准定位時间有长有短,谁了解何时终止?有时1口气滑好几个元素,也不确定性究竟终止在哪儿个元素上。

具体上,规范制订者们和访问器厂商正在积极主动推动Scroll Snap有关回调函数恶性事件的落地,这样能够精准了解滚到何时终止和翻转精准定位到哪一个元素上,可是,规范还在折腾,访问器都还没适用。新项目如今就要用,如何办呢?

对!毫无疑问要派出JS輔助。

具体上,即使并不是Scroll Snap的应用情景,即使是一般的翻转,因为翻转具备惯性,检验翻转是不是终止也是1个常常会遇到的要求。因而,必须捋1个检验翻转何时终止的方式。

3、我的翻转中断检验方式

检验元素的翻转是不是终止,我的完成思路是这样的,在翻转恶性事件中跑1个定时执行器,纪录当今時间的翻转间距和上1次翻转的间距是不是相同,假如相同则觉得翻转早已终止,假如不相同,则觉得翻转仍然在开展。

用JavaScript示意便是( 这个完成已作废 ):

// 定时执行器,用来检验水平翻转是不是完毕
var timer = null;
// 上1次翻转的间距
var scrollLeft = 0, scrollTop = 0;
// 翻转恶性事件刚开始
container.addEventListener('scroll', function () {
    clearInterval(timer);
    // 再次新的定时执行器
    timer = setInterval(function () {
        if (container.scrollLeft == scrollLeft && container.scrollTop == scrollTop) {
            // 翻转间距相同,觉得终止翻转了
            clearInterval(timer);
            // ... 做你想做的事儿,如回调函数解决
        } else {
            // 不然,仍然记牢上1次翻转部位
            scrollLeft = container.scrollLeft;
            scrollTop = container.scrollTop;
        }
    }, 100);
});

假如你有兴趣爱好,能够对上面编码开展进1步封裝。

升级于翌日

翻转停止检验能够不用分辨前后左右翻转间距是不是相同,由于不管是惯性還是Snap精准定位scroll恶性事件也是不断开启的。因而,能够立即这样:

// 定时执行器,用来检验水平翻转是不是完毕
var timer = null;
// 翻转恶性事件刚开始
container.addEventListener('scroll', function () {
    clearTimeout(timer);
    // 再次新的定时执行器
    timer = setTimeout(function () {
        // 无翻转恶性事件开启,觉得终止翻转了
        // ... 做你想做的事儿,如回调函数解决
    }, 100);
});

自然,上面出示的方式其实不是是非非常精确的中断检验,由于Scroll Snap最终的重精准定位访问器本身有个检验,这个检验恶性事件,依据我的不断科学研究与检测,应当是 350ms (具体运作将会会稍微大几毫秒),远比上面设定的 100ms 要大,因而,会有1次不正确的冗余分辨,产生在Snap精准定位刚开始以前。

我想了想,这个难题没法防止,但也并不是甚么大难题。总不能能设定 400ms 检验,延迟时间太高,体验不1定好。

4、当今翻转总体目标元素检验方式

基本原理以下,遍历全部的目录元素,检验目录元素的左侧缘相对翻转器皿左侧缘(假如是左对齐- scroll-snap-align:left )或管理中心(垂直居中对齐)或右侧缘(右对齐)的部位。自然,假如目录元素规格和翻转器皿规格1致,则左中右侧缘检验都可以以。

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輔助的要求点,最后的实际效果就出来了。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。