关于javascript：防止jQuery跳到底部(使用fadeIn时)


Prevent jQuery from jumping to the bottom (when using fadeIn)

我已经用 jQuery 创建了一些淡入淡出的 div，但如果用户向下滚动一点，我会遇到问题。如果你不在页面顶部，当一个新的div淡入时，它总是会跳到底部。

这是我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
#overflowwrap {
   overflow:hidden !important;
}
</style>


   a lot of content
   a lot of content
   a lot of content
   a lot of content
   a lot of content



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

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

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

有什么办法可以防止网站跳到底部吗？

相关讨论

尝试不同的方法。

代替 display: none 在每个元素上，尝试 opacity: 0;

然后代替：

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

使用：

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

并添加：

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

在您的 <style> 标签内。

你不能€?freezea€?滚动，但您可以读取和更改滚动位置，尤其是因为您使用的是 jQuery.

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

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

然后你可以用不同的id和持续时间多次调用同一个函数，就像这样：

1
fadeInElement('one', 500);

或者这个：

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

您可以在 CodePen 或 JSFiddle

上查看工作示例

相关讨论

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('#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/

很简单。只需将您的 div 重新排序为您想要显示它们的顺序，而不是"五、四、三、二、一"。
您的浏览器无意将您带到底部，它只是试图将您的观点固定在当前的哈希导航上。由于您的淡入淡出 div 始终在上方，因此您的 scrollTop 只会跳到底部。

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

PS：也要找一些id！

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#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/

  • 你需要用hidden来限制溢出吗？

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

    这是一个 jsfiddle：https://jsfiddle.net/sm2qaa3c/2/

    enter

    1
    2
    3
    4
    5
    6
    ['#one', '#two', '#three', '#four', '#five'].forEach((id, idx) => {
        setTimeout(() => {
            $(id).fadeIn(500);
            $('#overflowwrap').scrollTop(0);
        }, idx * 5000);
    });

    • enter

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