子div滚动时父元素不滚动

2016-10-28  本文已影响213人  wlianfu
$.fn.scrollUnique = function() {
            return $(this).each(function() {
                var eventType = 'mousewheel';
                $(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();
                    }        
                });
            }); 
        };

        $('.box').scrollUnique();
上一篇下一篇

猜你喜欢

热点阅读