我有一个div,带有滚动条,当它到达最后,我的页面开始滚动。无论如何,我可以阻止这种行为吗?滚动div div滚动窗口,我该如何阻止它?
回答
找到解决方案。
这就是我所需要的。
这是代码。
http://jsbin.com/itajok/edit#javascript,html
使用一个jQuery插件。
更新由于取消通知
添加三个参数(
delta
,deltaX
,并deltaY
) 到事件处理程序的旧的行为现在已经过时并将在稍后的 版本中删除。
然后,event.deltaY
现在必须使用:
var toolbox = $('#toolbox'),
height = toolbox.height(),
scrollHeight = toolbox.get(0).scrollHeight;
toolbox.off("mousewheel").on("mousewheel", function (event) {
var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
return !blockScrolling;
});
你的链接使用github的js和休息,因为内容类型等等等等这里这个工程:http://jsbin.com/itajok/207/ – 2013-09-02 20:17:11
这两个jsbins似乎并没有在Chrome设备模拟器和在苹果手机。有谁知道这是否仍然有效? – 2015-06-11 07:51:15
您的“解决方案”仅适用于鼠标滚动事件,不适用于页面向上/向下或箭头键。 – Scott 2016-06-22 21:33:22
如果您将overflow: hidden
风格应该走
编辑:其实我看了你的问题错了,只会隐藏滚动条,但我不认为这是你在找什么。
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
我需要两个滚动条。我在谈论这个行为。当我滚动使用我的鼠标轨迹球达到div的滚动结束时,它不能滚动整个页面。 – Jeevan 2012-04-18 14:16:34
你可以做这样的事情灭活整个页面的滚动?
E.g.该HTML
<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
content
</div>
然后的JavaScript像这样:
var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
body.style.overflowY = 'auto';
}
不错,但是当你将鼠标悬停在div上时,它会使浏览器的滚动条消失。 – cstack 2012-08-09 19:26:44
@cstack你是对的,这就是为什么OP(Jeevan)自己的答案更好。 – 2014-07-04 07:03:40
许多浏览器滚轮消失,现在基于用户移动鼠标重新出现,因此上述评论不再是问题。 – 2015-10-16 03:42:49
如果我正确理解你的问题,那么你要防止的主要内容滚动当鼠标移动到一个div(假设侧栏)。为此,侧栏可能不是主内容(它是浏览器窗口)的滚动容器的子项,以防止滚动事件冒泡到其父项。
这可能需要通过以下方式标记的一些变化:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
看到它的工作在this sample fiddle和比较,与this sample fiddle具有侧边栏的一个稍微不同的鼠标离开的行为。请参阅scroll only one particular div with browser's main scrollbar。
所选解决方案是艺术作品。认为这是值得的一个插件....
$.fn.scrollGuard = function() {
return this
.on('wheel', function (e) {
var event = e.originalEvent;
var d = event.wheelDelta || -event.detail;
this.scrollTop += (d < 0 ? 1 : -1) * 30;
e.preventDefault();
});
};
这一直是我的一个持续的不便,并与我见过的其他黑客这个解决方案是那么干净。很想知道它是如何工作的,以及它会得到多大的支持,但是欢迎Jeevan和最初想到这个的人。顺便说一句 - stackoverflow的答案编辑器需要这个!
UPDATE
我相信这是因为它并不试图在所有操作DOM更好,只有防止起泡有条件...
$.fn.scrollGuard2 = function() {
return this
.on('wheel', function (e) {
var $this = $(this);
if (e.originalEvent.deltaY < 0) {
/* scrolling up */
return ($this.scrollTop() > 0);
} else {
/* scrolling down */
return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
}
})
;
};
工程在铬和许多伟大的比其他解决方案更简单...让我知道它是如何票价别处......
添加DOMMouseScroll事件使其与Firefox一起工作→http://jsfiddle.net/chodorowicz/egqy7mbz/1/ – chodorowicz 2015-07-03 17:35:20
我很惊讶这不是写入jquery。我认为其中一个要点并不在乎你使用的浏览器。 – robisrob 2015-12-14 17:09:56
实际上它看起来像两个都不赞成... ['wheel' event](https://developer.mozilla.org/en-US/docs/Web/Events/wheel) – robisrob 2015-12-14 17:12:06
您可以通过做这样的事情来禁用整个页面的滚动,但显示滚动条!
<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>
完美工作@joseantgv – 2018-02-09 08:58:25
我写了解决此问题
var div;
div = document.getElementsByClassName('selector')[0];
div.addEventListener('mousewheel', function(e) {
if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) {
e.preventDefault();
div.scrollTop = div.scrollHeight;
} else if (div.scrollTop + e.deltaY <= 0) {
e.preventDefault();
div.scrollTop = 0;
}
}, false);
这里的几个解决方案之一,没有页面元素恼人地跳跃,因为溢出隐藏被设置。 – 2015-11-11 14:55:43
+1这是一个可靠的解决方案。如果你将它附加到一个可滚动的容器中,你会希望在这个例子中的div是'e.currentTarget'。 – Matt 2016-12-04 11:26:49
很干净的解决方案。谢谢 – 2017-06-14 14:57:04
$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
var scrollTop = this.scrollTop;
if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
e.preventDefault();
}
});
如果输入选择器元素此禁用窗口上的滚动。 的作品像魅力。
elements = $(".selector");
elements.on('mouseenter', function() {
window.currentScrollTop = $(window).scrollTop();
window.currentScrollLeft = $(window).scrollTop();
$(window).on("scroll.prevent", function() {
$(window).scrollTop(window.currentScrollTop);
$(window).scrollLeft(window.currentScrollLeft);
});
});
elements.on('mouseleave', function() {
$(window).off("scroll.prevent");
});
基于CEED的答案,这里是一个版本,它允许嵌套滚动把守的元素。只有鼠标结束的元素才会滚动,并且滚动得非常顺利。这个版本也是可重入的。它可以在同一个元素上多次使用,并将正确删除并重新安装处理程序。使用
jQuery.fn.scrollGuard = function() {
this
.addClass('scroll-guarding')
.off('.scrollGuard').on('mouseenter.scrollGuard', function() {
var $g = $(this).parent().closest('.scroll-guarding');
$g = $g.length ? $g : $(window);
$g[0].myCst = $g.scrollTop();
$g[0].myCsl = $g.scrollLeft();
$g.off("scroll.prevent").on("scroll.prevent", function() {
$g.scrollTop($g[0].myCst);
$g.scrollLeft($g[0].myCsl);
});
})
.on('mouseleave.scrollGuard', function() {
var $g = $(this).parent().closest('.scroll-guarding');
$g = $g.length ? $g : $(window);
$g.off("scroll.prevent");
});
};
一个简单的方法是增加一类,如scroll-guard
,所有的页面,你能够滚动显示上的元素。然后使用$('.scroll-guard').scrollGuard()
来保护他们。
我不能得到任何答案在Chrome和Firefox的工作,所以我想出了这个合并:
$someElement.on('mousewheel DOMMouseScroll', scrollProtection);
function scrollProtection(event) {
var $this = $(this);
event = event.originalEvent;
var direction = (event.wheelDelta * -1) || (event.detail);
if (direction < 0) {
if ($this.scrollTop() <= 0) {
return false;
}
} else {
if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
return false;
}
}
}
这里是一个跨浏览器的方式做到这一点在Y轴上,它适用于桌面和移动设备。在OSX和iOS上测试。
var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
var scrollTop = this.scrollTop;
var maxScroll = this.scrollHeight - this.offsetHeight;
var deltaY = event.deltaY;
if ((scrollTop === maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0)) {
event.preventDefault();
}
});
scrollArea.addEventListener("touchstart", function(event) {
this.previousClientY = event.touches[0].clientY;
});
scrollArea.addEventListener("touchmove", function(event) {
var scrollTop = this.scrollTop;
var maxScroll = this.scrollHeight - this.offsetHeight;
var currentClientY = event.touches[0].clientY;
var deltaY = this.previousClientY - currentClientY;
if ((scrollTop === maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0)) {
event.preventDefault();
}
this.previousClientY = currentClientY;
});
这个工程真棒!哇,正是我所搜索的,它需要绝对更多upvotes。 – delato468 2017-09-01 14:16:24
此解决方案工作得很好,但需要很少调整: 需要通过'scrollTop> = maxScroll'来更改'scrollTop === maxScroll'。 对于1个案例来说,这似乎很奇怪。 – 2017-12-21 11:32:52
- 1. 防止div窗口滚动后滚动的窗口
- 2. Div向下滚动窗口滚动
- 3. 滚动窗口的DIV
- 4. 横幅滚动窗口滚动,但停止和不溢出div?
- 5. 如何阻止DIV大于视口滚动?
- 6. 浮动DIV滚动条问题。删除窗口滚动条
- 7. 如何停止比窗口高度更长的滚动div?
- 8. 当滚动窗口,它是如何选择的div
- 9. 滚动div大于浏览器窗口
- 10. 显示/隐藏div窗口滚动
- 11. 滚动多个div绑定到窗口滚动事件
- 12. 让窗口向左滚动时div向左滚动
- 13. Div无法滚动浏览器窗口只有滚动条
- 14. 我如何防止滚动被阻止滚动的子格
- 15. 只滚动div滚动
- 16. Div如果我滚动
- 17. 滚动到该DIV点击DIV
- 18. 如何通过只滚动同一个div的滚动条来滚动div?
- 19. 如何设置div内滚动div的滚动位置?
- 20. 如何滚动父区div时,悬停在子div和滚动?
- 21. 检测窗口和div上的滚动停止
- 22. DIV自动滚动
- 23. 自动滚动div
- 24. 滚动到div
- 25. jQuery #div滚动
- 26. 滚动到div
- 27. 阻止浏览器搜索CTRLF滚动我的折叠div
- 28. 如何防止窗口滚动jQuery slideToggle()?
- 29. 如何滚动某个div?
- 30. 如何使用其子div滚动div
@NGLN不是一个重复的,不同的问题。 – sidewinderguy 2016-04-12 02:46:58