美文网首页
子div滚动时父元素不滚动

子div滚动时父元素不滚动

作者: wlianfu | 来源:发表于2016-10-28 10:55 被阅读213次
    $.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();
    

    相关文章

      网友评论

          本文标题:子div滚动时父元素不滚动

          本文链接:https://www.haomeiwen.com/subject/rsteuttx.html