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

尝试不同的方法。

相反，每个元素都display: none，请尝试opacity: 0;

然后代替：

setTimeout( function show() {
    $("#two").fadeIn(500);
    }, 5000);

使用：

setTimeout( function show() {
    $("#two").addClass('is-visible);
}, 5000);

并添加：

.is-visible { opacity: 1 !important; }

在<style>代码中。

Answer 2

你不能“冻结”滚动，但你可以阅读和更改滚动位置，特别是因为你使用的是jQuery。

我的解决方案是在fadeIn指令之前立即保存滚动的当前位置，然后使用此函数立即重新分配相同的值：

function fadeInElement(id, time) {
  var currentScroll = $(window).scrollTop();
  $('#' + id).fadeIn(time);
  $(window).scrollTop(currentScroll);
}

然后你可以用不同的id和持续时间多次调用相同的函数，如下所示：

fadeInElement('one', 500);

或者这个：

setTimeout(function() {
    fadeInElement('two', 500);
}, 5000);

您可以查看一个有效的示例on CodePen或on JSFiddle

Answer 3

您是否需要使用隐藏限制溢出？

您可以设置overflow: auto，浏览器将自动确保淡入后确保scrollTop保持不变。元素用户在滚动后将保持相同的偏移量。如果用户没有滚动，那么它将在顶部显示最新的淡化元素

这是一个小伙伴：https://jsfiddle.net/sm2qaa3c/2/
重新阅读评论后，您似乎总是希望在顶部显示最新的褪色div。在这种情况下，您需要一个函数将scrollTop重置为0.您希望在overflowwrap而不是window上执行此操作，因为溢出滚动将会发生。
```
['#one', '#two', '#three', '#four', '#five'].forEach((id, idx) => {
    setTimeout(() => {
        $(id).fadeIn(500);
        $('#overflowwrap').scrollTop(0);
    }, idx * 5000);
});
```

参见jsfiddle：https://jsfiddle.net/sm2qaa3c/3/

Answer 4

简而言之，您可以做的最简单的事情是每次显示新的div时隐藏前一个div。

https://jsfiddle.net/6qj1hbp0/2/

$("#one").fadeIn(500);
setTimeout( function() {
  $("#one").hide();
  $("#two").fadeIn(500);
}, 3000);
setTimeout( function() {
  $("#two").hide();
  $("#three").fadeIn(500);
}, 6000);
setTimeout( function() {
  $("#three").hide();
  $("#four").fadeIn(500);
}, 9000);
setTimeout( function() {
  $("#four").hide();
  $("#five").fadeIn(500);
}, 12000);

如果你想从一个盒子淡出到另一个盒子（这会产生更加平滑的效果），你需要做一些其他的事情 - 最值得注意的是：

把盒子按顺序排列，从上到下，＃one到#five（无论如何你应该这样做 - 它只是有意义的）
为每个方框设置绝对位置
设置其他一些风格（见下面的小提琴）
在框中淡出时使用特殊类

https://jsfiddle.net/6qj1hbp0/3/

Answer 5

很简单。只需将您的div重新排序为您想要显示的顺序，而不是＆＃34;五，四，三，二，一＆＃34;。您的浏览器并没有打算将您带到底层，它只是试图将您的视点固定在当前的哈希导航上。由于你的渐变div总是在上面，你的scrollTop将跳到底部。

另一个解决方案 - 如果您不想重新排序 - 是删除所有div ID并创建其他方式来识别它们，例如＆＃34; data-id＆＃34;。

PS：之后也要寻找一些内容！

Answer 6

感谢您的回答，但他们并没有为我的目的而努力。

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

$('#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/

防止jQuery跳转到底部（使用fadeIn时）

6 个答案: