javascript - 滚动时闪烁的背景颜色

Question

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

但我的问题是 :当用户( 触摸 + 滚动 )在 div 时， background-color 是闪烁的颜色! 我想:在(点击、触摸 + 滚动)时不要更改 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 上设置背景，可以在touchstart处获取指针位置并在 touchend检查指针位置是否改变。如果没有，请更改 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", "");
}