Question

我将以下代码与JS .scroll一起使用，以检测底部视口滚动条何时向侧面滚动（然后根据该事件执行某些操作）。当我定位HTML标记时，它不会触发，但是如果我使用.scroll定位BODY标记，它会触发。

我在使用BODY标签滚动条时看到的问题是，仅当您一直滚动到将内部div设置为5000px的底部时，它才会显示。我认为这是自然的，视口底部的HTML滚动条，如果有要滚动的内容，它始终仅位于浏览器窗口的底部，但我不知道如何检测到它移动。

.scroll是否有办法检测到它是否正在滚动，或者还有另一种方法可以检测到视口是否在横向滚动？

<html>
<head>
<title>Side Scroll</title>
<script src="js/jquery.min.js"></script>
</head>
<body>



<style>
.extra_wide_div {
   width: 6000px;
   height: 5000px;
   background: linear-gradient(to right, red , yellow);
}

html {
    overflow-x: auto;
    overflow-y: auto;
}
body {
/*
    overflow-x: auto;
    overflow-y: hidden;
*/
}
</style>



<div class="extra_wide_div">
Hello
</div>



<script>
$scrollTarget = $('html');
$scrollTarget.scroll(function(e) {
    console.log("scroll triggered");
});
</script>



</body>
</html>

Answer 1

您应该同时选择html和body标签来检测滚动。

var $scrollTarget = $('html, body');
$scrollTarget.scroll(function(e) {
    console.log("scroll triggered");
});

这是因为不同的浏览器将滚动条附加到不同的标签。 Firefox和Internet Explorer浏览器利用了该选择器的html部分，Chrome和Safari等Webkit浏览器对正文做出了响应。

对于CSS，设置固定高度时，您应同时定位html和body标签。

html, body{
  height: 1000px;/*For scrolling*/
}

要使用Javascript设置高度，可以使用jQuery的.css()函数。

$('html, body').css("height", "1000px");

演示：

$('html, body').css("height", "1000px");
$('html, body').animate({scrollTop: 500}, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

可以在此处找到答案（您既不针对正文也不使用html：您不针对带有引号的“窗口”）：How to detect horizontal scrolling in jQuery?

如何使用Javascript / Jquery检测底部视口滚动条水平滚动

2 个答案: