$.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();
}
});
});
};
沒錯,依賴jQuery的一個擴展方法,上面代碼只要拷貝到你頁面的JS中,然後,你希望哪個元素滾動到底,父級不滾動,直接:
$().scrollUnique();