Whenever a user touchstarts on a div, I want to apply a background-color to that specific div. Then, as the user scrolls, I use the $(window).scroll event to either reset or remove the background-color from all divs.
However, my issue arises when a user both touches and scrolls on the divs, causing the background-color to flash in and out. I want to prevent the div's background-color from changing during a (tap, touch + scroll) event. If this is unclear, you can refer to apps like Facebook Messenger or Snapchat for a visual example.
Flashing divs: https://i.sstatic.net/OWtN5.gif
My code: https://www.w3schools.com/code/tryit.asp?filename=GLUIAUU64MDX - RUN ON TOUCH DEVICES.
$(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>