我知道人们会抱怨我在这里没有显示代码，但是发布Jquery / JS尝试的价值不高。唯一重要的部分是我想在div中完成
我的div现在就像
#wrapper {overflow:hidden, width:100%; height:100%, position: absolute}
#content_inside_wrapper {width:100%; height:3000px} //height is given, never auto
基本上，我想做的是需要一些JS代码，当用户不进行交互时，它们会自动沿一个方向（例如从上到下）沿垂直方向自动滚动#content_inside_wrapper ，但是当用户滚动鼠标滚轮或用手指拖动时会覆盖自动滚动，然后在鼠标再次空闲或用户停止触摸时又回到自动滚动状态。
答案 0 :(得分：1)
一个简单的解决方案，就像一个魅力：
const wrapper = document.getElementById("wrapper");
let timerId;
function initTimer() {
timerId = setInterval(() => wrapper.scrollBy(0, 1), 50);
}
initTimer();
wrapper.addEventListener("touchstart", () => {clearInterval(timerId)}, {passive: true});
wrapper.addEventListener("touchend", initTimer, {passive: true});body {overflow: hidden;}
#wrapper {overflow-y: scroll; width:100%; height:100%; position: absolute}
#content_inside_wrapper {width:100%; height:3000px}<main id="wrapper">
<div id="content_inside_wrapper">Lorem<br>ipsum<br>dolor<br>sit<br>amet,<br>consectetur<br>adipiscing<br>elit.<br>Suspendisse<br>faucibus<br>nibh<br>quis<br>posuere<br>lobortis.<br>Nulla<br>elementum<br>ex<br>consequat<br>orci<br>mattis<br>pulvinar.<br>Suspendisse<br>potenti.<br>Donec<br>consectetur,<br>justo<br>vel<br>mollis<br>porttitor,<br>magna<br>ex<br>suscipit<br>nisi,<br>viverra<br>mollis<br>ante<br>ipsum<br>non<br>arcu.<br>Aenean<br>egestas<br>arcu<br>quis<br>augue<br>ultrices,<br>at<br>mollis<br>nulla<br>vehicula.<br>Quisque<br>vel<br>ipsum<br>vitae<br>neque<br>efficitur<br>malesuada.<br>Nam<br>ac<br>tristique<br>urna.<br>Sed<br>a<br>lacus<br>id<br>augue<br>dapibus<br>venenatis<br>nec<br>scelerisque<br>magna.</div>
</main>
答案 1 :(得分：1)
这是我对您的问题的看法：我们可以使用window.requestAnimationFrame为您执行滚动。之所以选择不使用window.setTimeout()或window.setInterval()是因为它的执行回调被推到调用堆栈的末尾时，它不是非常可靠（容易漂移）。浏览器可以自由重新绘制时，window.requestAnimationFrame将滚动您的元素，从而优化性能。
然后，您可以选择在检测到某个事件（例如window.requestAnimationFrame或mousewheel）时中断touchend的递归调用，然后设置一个超时以重新开始滚动。
请参见下面的概念验证示例：
const scrollSpeedPerSecond = 150;
const scroller = document.getElementById('wrapper');
const timeToWaitBeforeResumeScrolling = 1000;
let previousTimestamp;
let allowScroll = true;
function scrollStep() {
if (!previousTimestamp)
previousTimestamp = new Date().getTime();
const currentTimestamp = new Date().getTime();
const elapsedTime = currentTimestamp - previousTimestamp;
const scrollY = scrollSpeedPerSecond / 1000 * (currentTimestamp - previousTimestamp);
scroller.scrollBy(0, scrollY);
// Update previous timestamp, so we can diff the next "tick" and see how far we need to scroll on the next invocation
previousTimestamp = new Date().getTime();
// We want to only allow recursive calling of itself (basically like a setInterval, when:
// 1. We have not scrolled to the end of the scroller
// 2. The `allowScroll` flag is set to true
if (
// 1
scroller.scrollTop < scroller.scrollHeight - scroller.clientHeight &&
// 2
allowScroll
) {
window.requestAnimationFrame(scrollStep);
}
}
// Call scrolling logic onload
window.requestAnimationFrame(scrollStep);
// Interrupt scrolling when certain events are detected
function pauseScrolling() {
allowScroll = false;
// After a fixed amount of time, we allow resuming of scrolling
window.setTimeout(() => {
allowScroll = true;
previousTimestamp = new Date().getTime();
window.requestAnimationFrame(scrollStep);
}, timeToWaitBeforeResumeScrolling);
}
window.addEventListener('mousewheel', pauseScrolling);
document.addEventListener('touchend', pauseScrolling);body {
margin: 0;
padding: 0;
}
#wrapper {
overflow: hidden;
width: 100vw;
height: 100vh;
position: absolute;
}
#content_inside_wrapper {
width: 100%;
height: 3000px;
background-image:
linear-gradient(0deg, rgba(255,255,255,0) 98%, rgba(255,255,255,1) 98%),
linear-gradient(0deg, red, orange, yellow, green, blue, purple);
background-size: 100% 50px, 100% 100%;
}<div id="wrapper">
<div id="content_inside_wrapper">
</div>
</div>
答案 2 :(得分：1)
我有解决方法：
ScrollRate = 100;
function scrollDiv_init() {
DivElmnt = document.getElementById('content_inside_wrapper');
ReachedMaxScroll = false;
DivElmnt.scrollTop = 0;
PreviousScrollTop = 0;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
if (!ReachedMaxScroll) {
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop++;
ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
}
else {
ReachedMaxScroll = (DivElmnt.scrollTop == 0) ? false : true;
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop--;
}
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
PreviousScrollTop = DivElmnt.scrollTop;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Scroll</title>
<script src="app.js"></script>
</head>
<body onLoad="scrollDiv_init()">
<div id="content_inside_wrapper" style="overflow:auto;width:50%;height:100px" onMouseOver="pauseDiv()"
onMouseOut="resumeDiv()">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error provident suscipit cumque quaerat ex, quos neque modi iste.
Quia veniam ipsa possimus expedita!
Mollitia saepe repudiandae nobis dolorum expedita neque?</p>
</div>
</body>
</html>
答案 3 :(得分：-1)
您可以使用信号量解决此问题，该信号量默认情况下设置为绿色。如果发生滚动，则将信号量设置为false（红色）。重复发生的事件将检查信号量。如果为true，则将进行滚动，并在事件结束时将信号量设置为true。
var semaphore = true;
setInterval(function() {
if (semaphore) {
window.scrollBy(0, 1);
}
semaphore = true;
}, 50);
window.addEventListener("scroll", function(event) {
if (semaphore) semaphore = false;
});
您可以类似地处理触摸事件。