问题现象:页面和div都有竖向滚动条,鼠标放在div,滚动div元素到底部后继续滚动,页面会滚动。
要求:div滚到底部后,如果再滚动鼠标,不要让页面滚动。
代码:增加扩展属性
//滚动条扩展
$.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();
}
});
});
};
页面加载时给div附加扩展属性
$("#win_Project").scrollUnique();