Created
December 20, 2018 06:28
-
-
Save ClausClaus/c78512a5acc8dc0530d7d92455e69b58 to your computer and use it in GitHub Desktop.
子元素滚,父元素不滚
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$.fn.scrollUnique = function() { | |
return $(this).each(function() { | |
let eventType = 'mousewheel' | |
// 火狐是DOMMouseScroll事件 | |
if (navigator.userAgent.indexOf('Firefox') > -1) { | |
eventType = 'DOMMouseScroll' | |
} | |
$(this).on(eventType, function(event) { | |
// 一些数据 | |
let scrollTop = this.scrollTop, | |
scrollHeight = this.scrollHeight, | |
height = this.clientHeight | |
let 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 | |
// 向上滚 || 向下滚 | |
let event = window.event || event | |
if (event.stopPropagation) { | |
event.stopPropagation() | |
} else { | |
event.cancelBubble = true | |
} | |
if (event.preventDefault) { | |
event.preventDefault() | |
} else { | |
event.returnValue = false | |
} | |
} | |
}) | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment