带有滚动事件的Javascript集翻译速度较慢

Javascript set translate with scroll event is slow

本文关键字：翻译 速度 Javascript 滚动 事件      更新时间：2023-09-26

基于滚动事件value设置transform: translateY();时出现问题。

基本上#moveme将在滚动事件触发时失效。

看看这个小提琴的现场表演：https://jsfiddle.net/bo6e0wet/1/

这是代码：

HTML

<div id="moveme"></div>

JS

$(window).on("scroll", function() {
  var currentScroll = $(this).scrollTop();  
  if (currentScroll <= 50) {
    $("#moveme").css("transform", "translate3d(0," + -currentScroll + "px, 0");
  }
});

moveme为什么没有完全滞育？是因为滚动事件触发太多，所以DOM没有很快得到它吗？

我试着用触摸板慢慢滚动。它运行得很完美。

但如果我按CTRL + DOWN ARROW，则意味着强制向下滚动到页面。moveme卡住。

如何解决这个问题？

我的代码出了什么问题？

提前感谢。。。

更改此条件：

if (currentScroll <= 50)

比如

if (currentScroll <= 75)

因为currentScroll从39跳到65，所以它错过了50点，只平移了-39 Fiddle；

$(window).on("scroll", function() {
  var currentScroll = $(this).scrollTop();	
  if ($(currentScroll <= 50)) {
    $("#moveme").css("transform", "translate3d(0," + -currentScroll + "px, 0");
  }
});
#moveme { width: 100%; height: 50px; background: red;
          position: fixed; top: 0; left:0; color: #FFF; }
#box { height: 1000px; background-color: #F1F1F1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="moveme">
  i will disappering. wait?! why there is a gap there?
  i'm not totally disappeared. what's wrong here?
</div>
<div id="box"></div>

出于某种原因，这种小的调整似乎对有效

$(window).on("scroll", function() {
    var currentScroll = $(this).scrollTop();    
    if ($(currentScroll <= 50)) {
        $("#moveme").css("transform", "translate3d(0," + -currentScroll + "px, 0");
    }
});
相关文章：