Conflict between jQuery's .animate(scrollLeft:) and CSS's scroll-snap-type. Fix doesn't work on iOS?

Question

Please run the code snippet...

I'm building a horizontal scroll menu. I've added left and right buttons (arrow icons) to allow user to move through the menu. So the user can move either by swiping/scrolling or by tapping the arrow icons.

So far so good. Next I added CSS's scroll-snap-type, which works nicely, improving UX when user is moving the scollbar by swiping. But than scroll-snap conflicts with jQuery's .animate( { scrollLeft: "+=200"}, 500), which is triggered when user clicks on either arrow. This makes the control buttons broken.

To fix this, I tried to remove the scroll-snap-type css class while the scrollLeft jQuery animation is running, and add it back once it's done.

This seems to work pretty good in all devices when run inside dev-tools simulation, including iPhone devices. Live testing with Android 10 browsers (Chrome/Firefox) works good too, but doesn't work on iOS (tested on iOS 14.2 with latest Safari, Firefox and Chrome).

On iOS, when clicking on either Right/Left arrow btn, the animation runs, but than the menu scroll position suddenly snaps back to the first item, making the controls broken.

jQuery(document).ready(function($) {
  /* Controls for horizontal scrolling */
  var leftPaddle = $( ".left-paddle" );
  var rightPaddle = $( ".right-paddle" );     
  // scroll to right
  $(rightPaddle).on('click', function(event) {
    event.preventDefault();
    $('#snappylist').removeClass('scroll-snap-type');
    $('#snappylist').animate({
        scrollLeft: "+=250"
      }, 500)
      .promise()
      .done(() => {
        $('#snappylist')
          .addClass("scroll-snap-type")
      });
  });
  // scroll to left
  $(leftPaddle).on('click', function(event) {
    event.preventDefault();
    $('#snappylist').removeClass('scroll-snap-type');
    $('#snappylist').animate({
        scrollLeft: "-=250"
      }, 500)
      .promise()
      .done(() => {
        $('#snappylist')
          .addClass("scroll-snap-type")
      });
  });
});

.list {
  margin-top: 50px;
  background-color: gray;
  display: flex;
  overflow-x: auto;
  gap: 0.25rem;
  -webkit-overflow-scrolling: touch;
  max-width: 300px;
}

.scroll-snap-type {
  scroll-snap-type: x mandatory;
}

.list-item {
  scroll-snap-align: center;
  display: inline-flex;
  min-width: 80px;
  height: 50px;
  justify-content: center;
  align-items: center;
  color: white;
}

.paddle {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 20px;
  border: none;
  background-color: red;
  padding: 0;
  max-height: 50px;
}

.left-paddle {
  left: 0;
  color: yellow;
  background: red;
}

.right-paddle {
  left: 300px;
  color: yellow;
  background: red;
}

However, if I leave the animation as-is, without removing it onclick:

    // scroll to right
    $(rightPaddle).on('click', function(event) { 
        event.preventDefault();
        $('#parent-div').animate( { scrollLeft: "+=150"}, 500)
    });

    // scroll to left
    $(leftPaddle).on('click', function(event) {
        event.preventDefault();
        $('#parent-div').animate( { scrollLeft: "-=150"}, 500)
    });

This way everything seeme to work fine on iOS mobile, but than I'm back to the broken animation in other os/browsers.

Conflict between jQuery's .animate(scrollLeft:) and CSS's scroll-snap-type. Fix doesn't work on iOS?

0 Answers