Javascript 滚动child div滚动窗口，如何停止？

我有一个带有滚动条的div，当它到达末尾时，我的页面开始滚动。还有什么方法可以阻止这种行为吗？

如果应用

溢出：隐藏
样式，它应该会消失

编辑：事实上我看错了你的问题，那只会隐藏滚动条，但我不认为那是你要找的
 您可以通过以下操作禁用整个页面的滚动：

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

您可以使用div上的mouseover事件禁用body滚动条，然后使用mouseout事件再次激活它

例如，HTML

<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
    content
</div>

如果我正确理解了您的问题，那么您希望在鼠标位于div上时防止滚动主要内容（比如侧边栏）。因此，侧边栏可能不是主内容滚动容器（即浏览器窗口）的子级，以防止滚动事件冒泡到其父级

这可能需要以以下方式进行一些标记更改：

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 
<div id="sidebar"> 
</div> 



查看它在中的工作情况，并将其与侧边栏的鼠标离开行为稍有不同的功能进行比较

另请参见。
找到了解决方案


这就是我需要的

这就是代码


使用jQuery插件


由于弃用通知而更新

发件人：

添加三个参数的旧行为（
delta
、
deltaX
和
deltaY
）
对事件处理程序的访问现在已弃用，将在以后的版本中删除
释放

然后，现在必须使用
event.deltaY
：

var toolbox=$（“#toolbox”），
高度=工具箱。高度（），
scrollHeight=toolbox.get（0）.scrollHeight；
工具箱。关闭（“鼠标滚轮”）。打开（“鼠标滚轮”，函数（事件）{
var blockScrolling=this.scrollTop==scrollHeight-height&&event.deltaY<0 | | this.scrollTop==0&&event.deltaY>0；
返回！区块滚动；
});

选定的解决方案是一件艺术品。认为它值得一个插件

$.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();
        });
};    

$.fn.scrollGuard=函数（）{
还这个
.打开（‘车轮’，功能（e）{
var事件=原始事件；
var d=event.wheelDelta | |-event.detail；
这个.scrollTop+=（d<0？1:-1）*30；
e、 预防默认值（）；
});
};    

这一直给我带来不便，与我见过的其他黑客相比，这个解决方案非常干净。我很想知道更多关于它是如何工作的以及它会得到多大的支持，但是为Jeevan和最初提出这个的人干杯。顺便说一句，stackoverflow回答编辑器需要这个

更新

我认为这样做更好，因为它根本不试图操纵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);
      }
    })
  ;
};    

$.fn.scrollGuard2=函数（）{
还这个
.打开（‘车轮’，功能（e）{
var$this=$（this）；
if（e.originalEvent.deltaY<0）{
/*向上滚动*/
返回（$this.scrollTop（）>0）；
}否则{
/*向下滚动*/
返回（$this.scrollTop（）+$this.innerHeight（）<$this[0].scrollHeight）；
}
})
;
};    

在chrome中非常有效，比其他解决方案简单得多。。。让我知道其他地方的情况

您可以通过执行类似操作来禁用整个页面的滚动，但要显示滚动条

<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></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);

var-div；
div=document.getElementsByClassName（'selector'）[0]；
div.addEventListener（'mousewheel'，函数（e）{
if（div.clientHeight+div.scrollTop+e.deltaY>=div.scrollHeight）{
e、 预防默认值（）；
div.scrollTop=div.scrollHeight；
}else if（div.scrollTop+e.deltaY
$this.find（'.scrollingDiv'）。on（'mousewheel-DOMMouseScroll'，函数（e）{
var delta=-e.originalEvent.wheelDelta | | e.originalEvent.detail；
var scrollTop=this.scrollTop；
if（（增量<0&&scrollTop==0）| |（增量>0&&this.scrollHeight-this.clientHeight-scrollTop==0））{
e、 预防默认值（）；
}
});
如果输入选择器元素，将禁用窗口上的滚动。
工作起来很有魅力

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'）.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;
        }
    }
}

$someElement.on（'mousewheel-DOMMouseScroll'，滚动保护）；
功能保护（事件）{
var$this=$（this）；
事件=event.originalEvent；
变量方向=（event.wheelDelta*-1）| |（event.detail）；
如果（方向<0）{
如果（$this.scrollTop（）=$this[0].scrollHeight）{
返回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();
    }
}, {passive:false});

scrollArea.addEventListener("touchstart", function(event) {
    this.previousClientY = event.touches[0].clientY;
}, {passive:false});

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;
}, {passive:false});

var scrollArea=this.querySelector（“.scroll area”）；
scrollArea.addEventListener（“轮子”，函数（）{
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”），函数（事件）{
this.previousClientY=event.touch[0].clientY；
}，{被动：假}）；
scrollArea.addEventListener（“触摸移动”，函数（事件）
$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;
        }
    }
}

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();
    }
}, {passive:false});

scrollArea.addEventListener("touchstart", function(event) {
    this.previousClientY = event.touches[0].clientY;
}, {passive:false});

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;
}, {passive:false});