来自 奥门威尼斯网址 2019-10-03 17:13 的文章
当前位置: 威尼斯国际官方网站 > 奥门威尼斯网址 > 正文

子成分scroll父成分容器不跟随滚动JS达成

子成分scroll父成分容器不跟随滚动JS达成

2015/12/18 · JavaScript · 滚动

原来的作品出处: 张鑫旭   

一、开场暖身

网络遍布蹲来蹲去的小段子,比方说:“李代沫蹲,李代沫蹲,李代沫蹲完黄海波蹲;南海波蹲,加利利海波蹲,波罗的海波蹲完梁左蹲;何侯择蹲,于正蹲,林和平蹲完张耀扬(Zhang Yaoyang)蹲;张耀扬(英文名:zhāng yào yáng)蹲,张耀扬先生蹲,张耀扬先生蹲完郭美美蹲;郭美美蹲,郭美美蹲,郭美美蹲完……”。应该源自“萝卜蹲,萝卜蹲,萝卜蹲完苹果蹲……”。

在网页中,滚动条的轮转行为也是相近的调调,如若页面现身八个内嵌滚动条,则行为表现是:子成分滚,子成分滚,子成分滚完父元素滚;父成分滚,父成分滚,父成分滚完容器滚……

比如说上面:

图片 1

在阿妹脸上滚,先是妹子滚,妹子滚完主页面滚,对吗~

//zxx: 别问为什么不选取张含韵(zhāng hán yùn ),因为张妹子照片是横的,滚动空间小,晓得伐~

那是浏览器的暗许行为,假如大家相见了三个急需:子成分滚,子成分滚完,就完了,父成分没有要求滚了。那该怎么实现啊?

在PC端,OK,本文介绍的方式,值适用于PC端,移动端,咳咳,笔者15年就没做过运动端项目,不佳意思,手生,作者也没去商量。

二、阻止浏览器默许行为的特定套路

哈哈,本文标题有个别别扭,实际上用一句话总结正是:怎么样堵住浏览器的默许滚动行为。

基本上,好像影像中就一贯不例外的,阻止浏览器的暗中同意行为,就一条(假若事件指标参数是event):event.preventDefault().

这是规范规范使用办法。然则,对于老IE浏览器,event.returnValue = false. 假诺你利用jQuery等框架,直接上面包车型客车event.preventDefault()就足以,库已经帮你解决了同盟细节管理。

OK,回到本文。阻止暗中同意滚动,也是类似,关键是找到确切的事件。

率先反响是scroll事件,不知晓是或不是自身测量检验的办法不对,结果没鸟用;其实想想也得以知晓,scroll事件要接触,尼玛必需已经滚动了哈~

新生,开采要从滚动事件的源头管理起来。在PC端,绝大相当多轮转都以鼠标滚动触发的(上下飞速键也能够滚动页面,但貌似人不知底),由此,我们得以从鼠标滚轮事件出手。

三、鼠标滚轮事件

JS基础知识的啦,mousewheel事件:

dom.onmousewheel = function() { // 嘿嘿嘿 };

1
2
3
dom.onmousewheel = function() {
    // 嘿嘿嘿
};

IE, Chrome都认得,然则FireFox浏览器,要运用DOMMouseScroll, 具体知识呢笔者事先有写过文章深入分析过:“JS滚轮事件(mousewheel/DOMMouseScroll)领会”。今后回过头看看那篇小说,内容和点都相当好。不过,那时恰恰在求学模块化开垦,以及JavaScript语言形式,所以,提供的代码,科科,不是拿来主义的调调,所以那篇小说未有火啊~

扯远了,总之吧,大家对鼠标滚动那一个事件,进行event.preventDefault(),页面就好像齿轮卡壳了完全一样,滚不动了!

四、原理爬上来

找到了要害钥匙,未来将在开门了。

子成分能够滚,父成分不能够滚。

大家可以对子成分写上鼠标滚轮事件,对吗,的不行子成分滚动到分界的时候,大家及时插一刀event.preventDefault()。干掉整个页面的滚动,世界一下子宁静了,时间周围忽地静止了相似,好像特不利的轨范哦!

于是,寡人作者屁颠屁颠搞起代码(粗糙暗指):

if (direction == 'up' && scrollTop == 0) { event.preventDefault() }

1
2
3
if (direction == 'up' && scrollTop == 0) {
   event.preventDefault()
}

翻译下便是:表弟本人往上滚,当滚到头的时候,页面滚动歇菜。

Chrome一测试,喔噢,好棒,鼓掌! 图片 2 FireFox一测试,喔噢,好棒too,鼓掌again! 图片 3 IE一测试,喔噢,好…………尼玛,滚蛋了~ 滚动中度直接跳过了0,直接把父成分给滚了。 图片 4

靠,什么鬼?不兼容,搞不定,怎么办?

五、临界手动翻滚

身为,我们决不到0或然最大滚动中度时候,再去阻止私下认可滚动,我们要在到达边际的前八个滚动,就起来动手,手动滚动到分界,同期event.preventDefault()堵住鼠标滚动行为。于是,IE浏览器也棒棒哒了!图片 5

说真的,从上马到现行,汉语交合敲了那样多,其实毛线用都未有,从度娘或谷哥过来的同校要求的不是怎么神神叨叨的废话,供给的只是底下这段可以一向拿来主义的代码,可以吗,拿去吗——子成分滚完就滚完的办法源代码:

$.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; // 火狐是DOMMouseScroll事件 if (document.mozHidden !== undefined) { eventType = 'DOMMouseScroll'; } $(this).on(eventType, function(event) { // 一些数码 var scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = this.clientHeight; var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会超过界限一向影响父级滚动,因而,临界时候手动边界滚动定位 this.scrollTop = delta > 0? 0: scrollHeight; // 向上滚 || 向下滚 event.preventDefault(); } }); }); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$.fn.scrollUnique = function() {
    return $(this).each(function() {
        var eventType = 'mousewheel';
        // 火狐是DOMMouseScroll事件
        if (document.mozHidden !== undefined) {
            eventType = 'DOMMouseScroll';
        }
        $(this).on(eventType, function(event) {
            // 一些数据
            var scrollTop = this.scrollTop,
                scrollHeight = this.scrollHeight,
                height = this.clientHeight;
 
            var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);        
 
            if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
                // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
                this.scrollTop = delta > 0? 0: scrollHeight;
                // 向上滚 || 向下滚
                event.preventDefault();
            }        
        });
    });
};

正确,重视jQuery的三个恢弘方法,下边代码只要拷贝到你页面的JS中,然后,你指望哪个成分滚动到底,父级不滚动,直接:

$().scrollUnique();

1
$().scrollUnique();

就能够了,然后就足以打卡下班了。

对了,有个demo, 您能够狠狠地方击这里:其间元素滚动到底外部容器不滚动demo

一经你的显示屏竖屏,或许增长幅度一九二〇的,会意识侧面未有大滚动条,则,麻烦我们手动中度改小,拉拉窗口啊,也许张开调整台之类的。

//zxx: 你问笔者哪些不加高页面造一个滚动条?唉,舍不得把底部的广告特意藏在滚动条之外~

六、进行试探

前文也波及,页面滚动条滚动的平地风波源比较多,不止是鼠标滚动,上下键,End键, Home键等皆有滚动定位行为。因而,大家要想百分百整个封闭扼杀滚动行为,仅仅上边的鼠标滚动代码是相当不够的,可是,关键钥匙已经给大家了,我们可以依次,依照本人的种类须求举办更进一竿深切张开。

然则,作者个人以为,上边mousewheel管理已经丰硕了,什么键盘触发滚动,让她和睦去游玩吧,依旧别折腾了,吃力不讨好。

哎,写完了,抬头一看,一张截图都尚未,这可非常,八字不能断,搞一张。

图片 6

恩,不错,真正的不利的「截」图。

图片 7

 

1 赞 1 收藏 评论

图片 8

本文由威尼斯国际官方网站发布于奥门威尼斯网址,转载请注明出处:子成分scroll父成分容器不跟随滚动JS达成

关键词: