防止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

嘗試不同的方法。

相反，在每個元素上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);

您可以在CodePen或JSFiddle 上查看一個有用的 示例

Answer 3

1. 你需要用隱藏限制溢出嗎？

   您可以設置overflow: auto和瀏覽器將自動確保淡入后確保scrollTop保持不變。元素用戶在滾動后將保持相同的偏移量。 如果用戶沒有滾動，那么它將在頂部顯示最新的淡化元素

   這是一個jsfiddle： https ：//jsfiddle.net/sm2qaa3c/2/

   

2. 重新閱讀你的評論后，似乎你總是希望在頂部顯示最新的褪色div。 在這種情況下，您需要一個函數將scrollTop重置為0.您希望在overflowwrap not 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重新排序為您要顯示的順序，而不是“五，四，三，二，一”。 您的瀏覽器無意將您帶到底部，它只是試圖將您的視點固定在當前哈希導航上。 由於你的漸變div總是在上面，你的scrollTop將跳到底部。

另一個解決方案 - 如果你不想重新排序 - 是刪除所有div id並創建其他方式來識別它們，比如“data-id”。

PS：之后也找一些id！

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/