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

这篇文章是逛张鑫旭大神博客时偶然看到的，感觉很棒。

文章太长，我就长话短说。

目的就是你有一个子元素滚动框滚动时，当滚动框滚完后，父元素容器就开始滚动，例如你的body，浏览器滚动，可能用户体验很差。

大神给我们提供了一个很简单的方法，直接贴代码，废话了。

CSS代码：

.test {
    width: 210px;
    height: 200px;
    overflow: auto;
}

HTML代码：

<div id="test" class="test">
    <img src="mm2.jpg">
</div>

JS代码：

$.fn.scrollUnique = function() {
    return $(this).each(function() {
        var eventType = 'mousewheel';
        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();
            }        
        });
    });	
};

$('#test').scrollUnique();

 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

注意几点，图片选择尽量宽高比小一点，父元素的尺寸别设置太大。否则不能出现滚动条了。body不出现的滚动条怎么办？

直接f12，或者右键单击检查。

我这写的很简单，具体原理 包括分析过程 欢迎大家去张鑫旭大神的博客看看。

飞机票:http://www.zhangxinxu.com/wordpress/?p=5092