Javascript 溢出时捕获滚动：隐藏元素

假设您有一个隐藏了溢出的元素，是否可以在不显示滚动的情况下捕获该元素上的鼠标滚动

我问这个问题的原因是；我有一个单页设计的网站，我写了一个脚本，当你向下或向上滚动时自动滚动到下一个位置。但有些东西我不想要。当他们试图滚动时，页面实际上是在真正意义上滚动，然后函数启动滚动以将自身滚动到下一个位置。我计划将

正文

的

溢出

设置为

隐藏

，它们只会看到自动滚动，而不会看到滚动

例：

HTML

JS

---

您遇到的问题是，每次窗口滚动时，您都会触发一些使窗口滚动的代码，因此浏览器只是因为卡在电路中而感到困惑

最好让溢出保持正常，并将代码放入诸如

单击

事件处理程序之类的内容中进行滚动，例如在一组链接上：

$("a").on('click', function(e) {
  var href = $(this).attr("href");
  e.preventDefault();

  var offsetTop = href === "#" ? 0 : $(href).offset().top;
  $('html, body').stop().animate({ scrollTop: offsetTop }, 500, 'swing')
};

---

如果你不想让用户点击，你可以在加载时设置一个定时功能，定期触发你的滚动动画，但是如果有什么方法可以覆盖它，对用户来说是最好的，因为当你想停下来看东西时，页面移动时真的很烦人，如果将来有人需要，下面是答案

$(document).ready(function(){
  $(document).bind('mousewheel', function(evt) {
    $('body').animate({'scrollTop':'1000'},3000);
  });
});

---

下面是一个元素

溢出的示例：隐藏

并在位置之间滚动：

var scroll\u blocked=false；
$（'.scrollable'）.on（'mousewheel-DOMMouseScroll'，函数（e）{
如果（！滚动被阻止）{
var delta=（e.originalEvent.wheelDelta | | |-e.originalEvent.detail）；
if（δ<0）{
var new_pos=$（'.scrollable'）.scrollTop（）+$（'.scrollable'）.height（）；
if（new_pos>（$（'.scrollable_inner'）.height（）-$（'.scrollable'）.height（））返回false；
}否则如果（增量>0）{
var new_pos=$（'.scrollable'）.scrollTop（）-$（'.scrollable'）.height（）；
如果（新位置<0）返回false；
}
//滚动到新位置
$（'.scrollable'）.animate（{'scrollTop'：new_pos}，500）；
滚动_blocked=true；
setTimeout（函数（）{
滚动_blocked=false；
}, 500);
}
//禁用所有其他滚动条
返回false；
});
。可滚动{
高度：200px；
宽度：200px；
溢出：隐藏；
}
.可滚动的{
}
.盒子{
高度：200px；
宽度：100%；
}
.box_green{
背景颜色：绿色；
}
.蓝盒子{
背景颜色：蓝色；
}
.盒子红{
背景色：红色；
}

第一张幻灯片-悬停并向下滚动
中滑梯
最后一张幻灯片-向上滚动
如果用户没有鼠标滚轮（例如，仅带触控板的笔记本电脑），会发生什么情况？还是根本没有鼠标（触摸屏）？或者其他一些原因，这是一个坏主意？如果你捕获鼠标滚轮的滚动，它的算法与笔记本电脑的触控板等相同。因为JQuery的滚动功能捕获触摸屏幻灯片或笔记本电脑的触控板@NietthedarkAbsolw虽然这是真的，但如果您完全禁用滚动（这就是
overflow:hidden
所做的），你将需要重新创建每一种滚动方式。我能做到这一点只要给我一种方法，如果你知道=）@nietthedark绝对我的脚本现在运行良好，我通过在函数启动时隐藏身体的溢出来最小化manuel滚动。但在函数启动之前，页面上仍有少量的滚动。如果页面上没有移动，它看起来会更专业。我添加了一些代码，可能会有所帮助。我认为让scroll事件处理程序导致进一步滚动是个坏主意-这不是正常的行为，它可能会随着浏览器的更新而改变，并且你故意进入循环，没有真正的原因。我发布了我正在寻找的答案。检查一下。顺便说一句，谢谢你的回答，我的答案是有点错过了捕获的方式，如果滚动是下降或上升。这是完全有效的答案。
$(document).ready(function(){
  $(document).scroll(function(){
    $('body').animate({'scrollTop':'1000'},3000);
  });
});

$("a").on('click', function(e) {
  var href = $(this).attr("href");
  e.preventDefault();

  var offsetTop = href === "#" ? 0 : $(href).offset().top;
  $('html, body').stop().animate({ scrollTop: offsetTop }, 500, 'swing')
};

$(document).ready(function(){
  $(document).bind('mousewheel', function(evt) {
    $('body').animate({'scrollTop':'1000'},3000);
  });
});