转载

小tip: 子元素scroll父元素容器不跟随滚动实现

一、开场暖身

网上常见蹲来蹲去的小段子，比方说：“李代沫蹲，李代沫蹲，李代沫蹲完黄海波蹲；黄海波蹲，黄海波蹲，黄海波蹲完宁财神蹲；宁财神蹲，宁财神蹲，宁财神蹲完张耀扬蹲;张耀扬蹲，张耀扬蹲，张耀扬蹲完郭美美蹲;郭美美蹲，郭美美蹲，郭美美蹲完……”。应该源自“萝卜蹲，萝卜蹲，萝卜蹲完苹果蹲……”。

在网页中，滚动条的滚动行为也是类似的调调，如果页面出现多个内嵌滚动条，则行为表现是：子元素滚，子元素滚，子元素滚完父元素滚；父元素滚，父元素滚，父元素滚完容器滚……

比方说下面：

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

//zxx: 别问为什么不使用张含韵，因为张妹子照片是横的，滚动空间小，晓得伐~

这是浏览器的默认行为，如果我们遇到了一个需求：子元素滚，子元素滚完，就完了，父元素不需要滚了。那该如何实现呢？

在PC端，OK，本文介绍的方法，值适用于PC端，移动端，咳咳，我15年就没做过移动端项目，不好意思，手生，我也没去研究。

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

哈，本文标题有些拗口，实际上用一句话概括就是：如何阻止浏览器的默认滚动行为。

基本上，好像印象中就没有例外的，阻止浏览器的默认行为，就一条(假设事件对象参数是event)： event.preventDefault() .

这是标准规范使用方法。但是，对于老IE浏览器， event.returnValue = false . 如果你使用jQuery等框架，直接上面的 event.preventDefault() 就可以，库已经帮你搞定了兼容细节处理。

OK，回到本文。阻止默认滚动，也是类似，关键是找到准确的事件。

第一反应是 scroll 事件，不知道是不是我测试的方法不对，结果没鸟用；其实想想也可以理解，scroll事件要触发，尼玛必须已经滚动了哈~

后来，发现要从滚动事件的源头处理起来。在PC端，绝大多数滚动都是鼠标滚动触发的（上下快捷键也可以滚动页面，但一般人不知道），因此，我们可以从鼠标滚轮事件入手。

三、鼠标滚轮事件

JS基础知识的啦， mousewheel 事件：

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

IE, Chrome都认识，但是FireFox浏览器，要使用DOMMouseScroll, 具体知识呢我之前有写过文章分析过：“ JS滚轮事件(mousewheel/DOMMouseScroll)了解 ”。现在回过头看看这篇文章，内容和点都挺好。但是，当时正好在学习模块化开发，以及JavaScript语言模式，所以，提供的代码，科科，不是拿来主义的调调，所以这篇文章没有火啊~

扯远了，总之呢，我们对鼠标滚动这个事件，进行 event.preventDefault() ，页面就像齿轮卡壳了一样，滚不动了！

四、原理爬上来

找到了关键钥匙，现在就要开门了。

子元素可以滚，父元素不能滚。

我们可以对子元素写上鼠标滚轮事件，对吧，的那个子元素滚动到边界的时候，我们立马插一刀 event.preventDefault() 。干掉整个页面的滚动，世界一下子安静了，时间好像突然静止了一般，好像很不错的样子哦！

于是，寡人我屁颠屁颠搞起代码(粗糙示意)：

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

翻译下就是：哥哥我往上滚，当滚到头的时候，页面滚动歇菜。

Chrome一测试，喔噢，好棒，鼓掌！小tip: 子元素scroll父元素容器不跟随滚动实现 FireFox一测试，喔噢，好棒too，鼓掌again! IE一测试，喔噢，好…………尼玛，滚蛋了~ 滚动高度直接跳过了0，直接把父元素给滚了。

靠，什么鬼？不兼容，搞不定，怎么办？

五、临界手动翻滚

就是说，我们不要到0或者最大滚动高度时候，再去阻止默认滚动，我们要在到达边界的前一个滚动，就开始下手，手动滚动到边界，同时 event.preventDefault() 阻止鼠标滚动行为。于是，IE浏览器也棒棒哒了！小tip: 子元素scroll父元素容器不跟随滚动实现

说实话，从开头到现在，中文啪啪啪敲了这么多，其实毛线用都没有，从度娘或谷哥过来的同学需要的不是什么神神叨叨的废话，需要的只是下面这段可以直接拿来主义的代码，好吧，拿去吧——子元素滚完就滚完的方法源代码：

$.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中，然后，你希望哪个元素滚动到底，父级不滚动，直接：