滚动的小孩滚动窗口,我该如何停止?

我有一个div,一个滚动条,当到达最后,我的页面开始滚动。 无论如何,我可以阻止这种行为吗?

13 Solutions collect form web for “滚动的小孩滚动窗口,我该如何停止?”

你可以通过做这样的事情来停用整个页面的滚动:

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div> 

find解决scheme。

http://jsbin.com/itajok

这是我需要的。

这是代码。

http://jsbin.com/itajok/edit#javascript,html

使用jQuery插件。


由于弃用通知而更新

从jquery-mousewheel :

将三个参数( deltadeltaXdeltaY )添加到事件处理程序的旧行为现在已被弃用,并将在以后的版本中删除。

然后,现在必须使用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; } } } 
  • 推荐2012年的jQuery模板?
  • 将背景应用于<html>和/或<body>
  • 当iPhone的方向从纵向变为横向时,保留HTML字体大小
  • JavaScript中的“提交不是函数”错误
  • window,window.top和window.parent有什么区别?
  • 我怎样才能构造一个表头,而不是跨越HTML中的多行?
  • 如何在HTML中调用JavaScript函数而不是href
  • CSS垂直alignment不适用于浮动
  • 使用css在单元格(td)之间添加空格
  • 如何使用Javascript来读取本地文本文件并逐行阅读?
  • 如何以编程方式告诉HTMLselect下拉(例如,由于鼠标hover)?