嗨,当我悬停一个元素时,是否可以在不使用overflow:hidden;
的情况下禁用窗口滚动?
$('.chat-content').on('mouseenter',function(){
$(document).scroll(function(e){
if(!$(e).hasClass('.chat-content'))
e.stopPropagation();
e.preventDefault();
});
});
我的意思是,我想让滚动条可见但是当我滚出元素我用鼠标结束时窗口不会滚动,而我已经结束的元素可以滚动
因此禁用身体滚动,但不使用css
的元素这是我做的另一次尝试:http://jsfiddle.net/SHwGL/
答案 0 :(得分:46)
尝试在除一个
之外的所有节点上处理'mousewheel'事件$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
答案 1 :(得分:6)
如果您想要滚动元素以及阻止窗口滚动,这是一个非常有用的功能:
$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
申请课程#34; Scrollable"对你的元素而言就是这样!
答案 2 :(得分:2)
遵循格伦斯的想法,这里有另一种可能性。 它允许你在div内滚动,但当div滚动结束时会阻止身体随之滚动。 但是,如果滚动太多,似乎累积了太多的preventDefault,然后如果要向上滚动则会产生延迟。有没有人建议解决这个问题?
$(".scrollInsideThisDiv").bind("mouseover",function(){
var bodyTop = document.body.scrollTop;
$('body').on({
'mousewheel': function(e) {
if (document.body.scrollTop == bodyTop) return;
e.preventDefault();
e.stopPropagation();
}
});
});
$(".scrollInsideThisDiv").bind("mouseleave",function(){
$('body').unbind("mousewheel");
});
答案 3 :(得分:1)
在StackOverflow的另一篇文章中回答了这个问题:Answered
另一种方法是使用:
$(document).bind("touchmove",function(event){
event.preventDefault();
});
但它可能会阻止某些jquery移动功能正常工作。
答案 4 :(得分:1)
没有外部变量:
$('.element').bind('mousewheel', function(e, d) {
if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
|| (this.scrollTop === 0 && d > 0)) {
e.preventDefault();
}
});
答案 5 :(得分:0)
CSS'固定'解决方案(就像Facebook一样):
body_temp = $("<div class='body_temp' />")
.append($('body').contents())
.css('position', 'fixed')
.css('top', "-" + scrolltop + 'px')
.width($(window).width())
.appendTo('body');
切换到正常状态:
var scrolltop = Math.abs($('.body_temp').position().top);
$('body').append($('.body_temp').contents()).scrollTop(scrolltop);
答案 6 :(得分:-2)
您可以使用jquery-disablescroll来解决问题:
$window.disablescroll();
$window.disablescroll("undo");
支持handleWheel
,handleScrollbar
,handleKeys
和scrollEventKeys
。