Question

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

基本上，#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卡住了。

如何解决这个问题？

我的代码出了什么问题？

提前感谢...

Answer 1

更改此条件：

if (currentScroll <= 50)

更高的东西，比如

if (currentScroll <= 75)

因为currentScroll从39跳到65，所以它错过了50分，只翻译了-39 Fiddle;

Answer 2

$(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");
    }
});

Javascript设置翻译滚动事件很慢

2 个答案: