>

子元素scroll父元素容器不跟随滚动JS实现

- 编辑:至尊游戏网站 -

子元素scroll父元素容器不跟随滚动JS实现

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

2015/12/18 · JavaScript · 滚动

初藳出处: 张鑫旭   

生龙活虎、开场暖身

网络海人民广播广播台湾大学蹲来蹲去的小段子,举例说:“李代沫蹲,李代沫蹲,李代沫蹲完波罗的海波蹲;南海波蹲,圣劳伦斯湾.波蹲,南海波蹲完王斌蹲;李林蹲,王丽萍蹲,梁晓艳蹲完张耀扬(Zhang Yaoyang卡塔尔蹲;张耀扬(Zhang Yaoyang卡塔尔蹲,张耀扬(英文名:zhāng yào yáng卡塔 尔(英语:State of Qatar)蹲,张耀扬(Zhang Yaoyang卡塔尔蹲完郭美美蹲;郭美美蹲,郭美美蹲,郭美美蹲完……”。应该源自“萝卜蹲,萝卜蹲,萝卜蹲完苹果蹲……”。

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

比如说上边:

图片 1

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

//zxx: 别问怎么不行使张含韵(Zhang Hanyun卡塔 尔(英语:State of Qatar),因为张妹子照片是横的,滚动空间小,晓得伐~

那是浏览器的暗许行为,假使大家相见了二个急需:子成分滚,子成分滚完,就完了,父成分无需滚了。那该怎么兑现呢?

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

二、阻止浏览器暗中同意行为的一定套路

哈哈,本文标题有个别拗口,实际上用一句话总结正是:怎么着堵住浏览器的暗中认可滚动行为。

差不离,好像影像中就从未有过例外的,阻止浏览器的暗许行为,就一条(假诺事件目的参数是event):event.preventDefault().

那是标准标准使用办法。不过,对于老IE浏览器,event.returnValue = false. 借使您利用jQuery等框架,直接上边包车型大巴event.preventDefault()就可以,库已经帮您消除了协作细节管理。

OK,回到本文。阻止暗中同意滚动,也是相似,关键是找到准确的风浪。

第一反馈是scroll事件,不驾驭是还是不是自家测试的法子不对,结果没鸟用;其实动脑筋也足以通晓,scroll事件要接触,尼玛必需已经滚动了哈~

新兴,发掘要从滚动事件的源流管理起来。在PC端,绝大好多轮转都以鼠标滚动触发的(上下神速键也能够滚动页面,但貌似人不知情卡塔 尔(英语:State of Qatar),因而,大家得以从鼠标滚轮事件动手。

三、鼠标滚轮事件

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.original伊夫nt.wheelDelta) ? event.originalEvent.wheelDelta : -(event.original伊芙nt.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实现