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

Question

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

更新：在与朋友进行一些测试后，问题似乎出在 windows 上的 firefox 上。它在 mac 和 linux 上运行良好。 here is a fiddle so you can see with a increased height

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

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

---

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

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

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>

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