子元素scroll父元素容器不跟随滚动(JS实现),子元素内滚动条没有（css实现）

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

先上代码：

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

不顶用之（谷歌和火狐中，子元素滚动到边界的时候，父元素不滚动了；但是。。。到IE时，“滚动高度直接跳过了0，直接把父元素给滚了”-----来自张鑫旭博客）。

所以，张鑫旭大神的代码就派上用场了：

$.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();
            }        
        });
    });	
};

$(“#test).scrollUnique();  //#test 为父元素

注意：此时是有滚动条的哦

 

如果嫌滚动条碍眼，可以用css来控制：

父元素：宽a,高b,overflow:hidden;(不让父元素撑开，固定死高度）；

子元素：宽a+30px(左右），高b,overflow:auto;(好吧，子元素你随便拉长，撑起来吧，要不然，还怎么滚着玩呢）

弹窗里面有横向滚动条的实现方法：

 <div class="div-inside">
    <div class="div-outside"></div>

</div>

.div-inside{height:50px;width: 50px;overflow-x:auto;overflow-y:hidden;}

.div-outside{height:50px;width:400px;overflow-x:auto;overflow-y:hidden;}

差不多，可以天下太平，四海同贺了。