防止jQuery跳转到底部(使用fadeIn时)

Question

我用jQuery创建了一些淡入淡出的div,如果用户向下滚动一下我会遇到问题.如果您不在页面的顶部,当新div消失时,它将始终跳到底部.

这是我的代码:

<style>
#overflowwrap {
   overflow:hidden !important;
}
</style>

<div id="overflowwrap">
   <div id="five" style="display: none;">a lot of content</div>
   <div id="four" style="display: none;">a lot of content</div>
   <div id="three" style="display: none;">a lot of content</div>
   <div id="two" style="display: none;">a lot of content</div>
   <div id="one" style="display: none;">a lot of content</div>
</div>

<script>
$('#overflowwrap').css('max-height',$(window).height());

$("#one").fadeIn(500);
setTimeout( function show() {
   $("#two").fadeIn(500);
}, 3000);
setTimeout( function show() {
   $("#three").fadeIn(500);
}, 6000);
setTimeout( function show() {
   $("#four").fadeIn(500);
}, 9000);
setTimeout( function show() {
   $("#five").fadeIn(500);
}, 12000);
</script>

更新:示例小提琴:https://jsfiddle.net/6qj1hbp0/1/

这不是问题,如果这是页面上唯一的元素而用户无法滚动.但是,它集成在另一个站点(调查软件)上,因此用户可以滚动.

我能做些什么来阻止网站跳到底部？

Answer 1

感谢您的回答，但它们并没有达到我的目的。

但是，我从另一个论坛获得了不需要更改功能的解决方案。这似乎有效：

$('#overflowwrap').css('max-height', $(window).height());
fadeIn("#one", 0)
fadeIn("#two", 5000)
fadeIn("#three", 10000)
fadeIn("#four", 15000)
fadeIn("#five", 20000)

function cs() {
console.log(document.scrollingElement.scrollTop)
}
document.scrollingElement.scrollTop = 16

function fadeIn(el, when) {
setTimeout(function show() {
var t=document.scrollingElement.scrollTop
$(el).fadeIn(500);
document.scrollingElement.scrollTop = t
}, when);

}

这是 JSFiddle 上的一个工作示例：https ://jsfiddle.net/6qj1hbp0/4/