滚动时闪烁的背景颜色

Question

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

---

但我的问题是：当用户（触摸 + 滚动）在 div 处时，< strong>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", "");
}

Answer 2

试试这个

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

 //----------------------------------------------

$(document).on('touchstart', '.❄', function(evt) {
var that = this;
var oldScrollTop = $(window).scrollTop();
window.setTimeout(function() {
    var newScrollTop = $(window).scrollTop();
    if (Math.abs(oldScrollTop - newScrollTop) < 3) $(that).css("background-color", "#7bffea");
  }, 200);
});

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

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