码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-09 14:47:29      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

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

本文转自 张鑫旭的文章http://www.zhangxinxu.com/wordpress/2015/12/element-scroll-prevent-parent-element-scroll-js/

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

标签:

原文地址:http://www.cnblogs.com/yeminglong/p/5753121.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!