javascript - 滚动时背景颜色闪烁

Question

我的代码是当用户在每个div上touchstart时应用div背景颜色。这对你来说很清楚。
然后，当用户滚动时，我使用 $(window).scroll.. 事件来重置或删除所有背景颜色div 的。

---

但我的问题是:当用户(触摸 + 滚动)div时，< strong>背景颜色正在闪烁颜色!我想:在(点击、触摸+滚动)时不要更改 div 背景颜色。
如果您不明白我的意思问题，你可以看到:(facebook Messenger 好友对话、snapchat 对话、故事等)

闪烁的div:

我的代码:https://www.w3schools.com/code/tryit.asp?filename=GLUIAUU64MDX - 在触摸设备上运行。

$(window).scroll(function() {
  resetBg();
});

$(".❄").on('touchstart', function() {
  $(this).css("background-color", "#7bffea");
});

$(".❄").on('touchend mouseleave mouseup blur click', function() {
  resetBg();
});

function resetBg() {
  $(".❄").css("background-color", "");
}

div.❄ {
    display: block;
    height: 150px;
    border: 1px solid black;
    margin: 10px 0px;
    padding: 0px;
    border-radius: 8px;
    background-color: #ffffff;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="❄"></div>
  <div class="❄"></div>
  <div class="❄"></div>
  <div class="❄"></div>
  <div class="❄"></div>
  <div class="❄"></div>
  <div class="❄"></div>
  <div class="❄"></div>
  <div class="❄"></div>
  <div class="❄"></div>

Answer 1

您可以在 touchstart 处获取指针位置，并在 touchend 上检查指针位置是否更改，而不是在 touchstart 上设置背景。如果没有，请更改div背景并设置超时功能以重置它。如果指针的位置改变了，那么它就是一个滚动，所以你不需要改变背景

let initialY = null;

$(".❄").on('touchstart', function(e) {
  initialY = e.clientY;
});

$(".❄").on('touchend', function(e) {
  if(e.clientY===initialY){
     $(this).css("background-color", "#7bffea");
    setTimeout(()=>{    //This is optional
      resetBg();
    },100);
  }
});

function resetBg() {
  $(".❄").css("background-color", "");
}