javascript - Firefox 中的滚动步骤不同 - 使用鼠标滚轮

Question

我正在制作一个屏幕上有大量文字的网站，我希望能够同时滚动两个 div。所以这部分是有效的。我实际上能够滚动 div，但 div 上的跳跃真的太大了#back。（它们似乎实际上与窗口高度相同（所以也许你需要截断全屏才能完全理解我的意思））。

更新：在与朋友进行一些测试后，问题似乎出在 windows 上的 Firefox 上。它在 mac 和 linux 上运行良好。 这是一个小提琴，所以你可以看到更高的高度

这里有两个 gif，所以也许你会看到奇怪的效果。 每个页面移动 = 在我的鼠标上向下滚动一个滚轮（它也可以在触控板上正常工作，因为它不是鼠标滚轮）。

VS当我在我的css中删除两个中的一个时overflow，我下面的黑色方块停止工作，但滚动再次正常：

---

重要编辑：这是 Firefox 中的一个问题，但它似乎在 chrome & Brave 中正常工作。尽管如此，我仍在寻找一种使其工作的方法。

所以，我注意到当我overflows在 css 中设置两个时会发生这种情况，实际上，如果你删除一个，脚本将不再工作，但滚动错误也会停止。这是带有错误的示例：

let back_innerHeight = $("#back").height()
let back_scrollHeight = document.querySelector("#back").scrollHeight
 
let front_innerHeight = $("#front").innerHeight()
let front_scrollHeight = $("#front")[0].scrollHeight

$("#back").on("scroll", function () {
  
  // Get how many pixels were scrolled on #back
  let back_scrolled = $(this).scrollTop()
  
  // Calculate the scrolled percentage
  let percentage_back = back_scrolled / (back_scrollHeight - back_innerHeight)
  
  // Calculate how many pixels to scroll on #front
  let scrollIT = (percentage_back * (front_scrollHeight - front_innerHeight))
  
  // Just to validate that the percentage is applied correctly...
  let percentage_front = scrollIT / (front_scrollHeight - front_innerHeight)
  
  
  // Apply the scroll
  $("#front").scrollTop(scrollIT);
});

window.onresize = function(){
  back_innerHeight = $("#back").height()
  back_scrollHeight = document.querySelector("#back").scrollHeight
  front_innerHeight = $("#front").innerHeight()
  front_scrollHeight = $("#front")[0].scrollHeight
}

.scroll {
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
}
#front {
  overflow: hidden;
  position: absolute;
  background-color: black;
  color: white;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto auto auto auto;
  width: 25%;
  height: 35%;
  font-size: 3rem;
}
#back {
  overflow: auto;
  font-size: 8rem;
}

p {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="scroll" id="back">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>

<div class ="scroll" id="front">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>

标签： javascriptjquerycssfirefoxscroll

Answer 1

编辑

下面的内容不是问题的答案，现在更具体的是 FF 行为，而不是两个 div 之间的滚动同步。

---

用于滚动同步

这更多的是关于一些数学......以及使用哪些值。

您必须计算已滚动内容与可滚动内容的百分比。这是关键！可滚动的不是元素的整个高度，因为总有一部分是可见的。

这需要考虑三个值#back：

• A：你使用的 div 的可见部分.innerHeight()
• B：滚动像素的数量，你得到的.scrollTop()
• C：div的全高，包括已经滚动的部分（顶部以上）和要滚动的部分（底部以下）。那就是scrollHeight财产。

因此，要获得正确的百分比，公式为：B/(C-A)。

然后，在“可滚动像素”上使用这个百分比#front，这又是全高减去可见高度。

你去吧！

let back_innerHeight = $("#back").height()
let back_scrollHeight = document.querySelector("#back").scrollHeight
 
let front_innerHeight = $("#front").innerHeight()
let front_scrollHeight = $("#front")[0].scrollHeight

$("#back").on("scroll", function () {
  
  // Get how many pixels were scrolled on #back
  let back_scrolled = $(this).scrollTop()
  
  // Calculate the scrolled percentage
  let percentage_back = back_scrolled / (back_scrollHeight - back_innerHeight)
  
  // Calculate how many pixels to scroll on #front
  let scrollIT = (percentage_back * (front_scrollHeight - front_innerHeight))
  
  // Just to validate that the percentage is applied correctly...
  let percentage_front = scrollIT / (front_scrollHeight - front_innerHeight)
  
  console.log("Scrolled % BACK:", percentage_back, "FRONT:", percentage_front)
  
  // Apply the scroll
  $("#front").scrollTop(scrollIT);
});

window.onresize = function(){
  back_innerHeight = $("#back").height()
  back_scrollHeight = document.querySelector("#back").scrollHeight
  front_innerHeight = $("#front").innerHeight()
  front_scrollHeight = $("#front")[0].scrollHeight
}

div {
}
#front {
  overflow: hidden;
  position: fixed;
  background-color: black;
  color: white;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto auto auto auto;
  width: 25%;
  height: 35%;
  font-size: 3rem;
}
#back {
  height: 95vh;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 8rem;
}

p{
  margin:0;
  padding:0;
}

/* Just for this demo here... to limit the SO console's height */
.as-console-wrapper{
  height: 1.4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="back">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>

</div>

<div id="front">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>

一些文档：

• .innerHeight()
• .scrollHeight