滚动的小孩滚动窗口，我该如何停止？
我有一个div，一个滚动条，当到达最后，我的页面开始滚动。 无论如何，我可以阻止这种行为吗？
你可以通过做这样的事情来停用整个页面的滚动：
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div> find解决scheme。
这是我需要的。
这是代码。
http://jsbin.com/itajok/edit#javascript,html
使用jQuery插件。
由于弃用通知而更新
从jquery-mousewheel ：
将三个参数（
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; });
演示
选定的解决scheme是一件艺术品。 认为这是值得的插件….
$.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(); }); };
这对我来说是一个持续的不便，而且与我见过的其他黑客相比，这个解决scheme非常干净。 好奇地知道它是如何工作的，以及得到多大的支持，但对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); } }) ; };
在铬合金工作很好，比其他解决scheme简单得多…让我知道如何在其他地方的票价…
小提琴
你可以在div上使用一个mouseover事件来禁用body滚动条，然后使用一个mouseout事件来再次激活它。
如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上时（例如侧边栏），你要防止滚动主要内容。 为此，侧栏可能不是主内容（它是浏览器窗口）的滚动容器的子项，以防止滚动事件冒泡到其父项。
这可能需要以下列方式进行一些标记更改：
<div id="wrapper"> <div id="content"> </div> </div> <div id="sidebar"> </div>
看到它在这个示例小提琴中工作，并与这个样本小提琴比较，它有一个稍微不同的鼠标离开行为的侧边栏。
另请参阅只使用浏览器的主滚动条滚动一个特定的div 。
我写了解决这个问题
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);
$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(); } });
如果您inputselect器元素，将禁用窗口上的滚动。 像魅力一样工作。
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"); });
这是一个跨浏览器在Y轴上执行此操作的方式，它可以在桌面和移动设备上运行。 在OSX和iOS上testing。
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; });
你可以通过做这样的事情来closures整个页面的滚动，但显示滚动条！
<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>
基于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()来保护它们。
如果你应用一个overflow: hidden风格，它应该消失
编辑：其实我看你的问题错了，这只会隐藏滚动条，但我不认为这就是你在找什么。
我无法在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; } } }
