1

I have a list of items that correlate to div IDs on the page. The items serve as anchor links to navigate the page. They also highlight as the user scrolls to each section on the page. On mobile, however, I'd also like the list items be horizontally scrollable and scroll into view as the user moves down the page (see screen grab for a visual). I figured I could easily use ScrollIntoView for this, but Safari mobile doesn't play nice with it and it chokes the touch scroll on the page.

Here's what I'm currently using. It works beautifully on Chrome.

$(window).scroll(function(){
    $('.profile-content > section').each(function() {
      var id = $(this).attr('id');
      $('#profileNav a').removeClass('active');
      $('#profileNav a[href=\\#'+ id +']').addClass('active');

      if( $(window).width() < 768 ) {
        $('#profileNav a[href=\\#'+ id +']')[0].scrollIntoView({
            behavior: "smooth",
            inline: "center"
        });
      }
    });
  });

Any suggestions on what I can do to make it Safari-friendly? Currently it breaks the touch scroll (it acts very clunky and isn't smooth) and Safari ignores the ScrollIntoView parameters, so behavior and inline are both ignored. Thanks!

enter image description here

Adam Robertson
  • 547
  • 1
  • 9
  • 22
  • There are polyfils, and [this answer](https://stackoverflow.com/a/53672870/3702797) even adds a nice feature-detector. Note: scrollTo(options) & scrollIntoView(options) have same browser supports, and polyfils will do for both. – Kaiido Mar 14 '19 at 02:03
  • @Kaiido Trying to put the polyfills js into angular 8 but it's not working in Safari browser. – Snowbases Jan 12 '20 at 17:45
  • @Adam Robertson, That's a nice font. it's outside of the question, may I know the font name? – Snowbases Jan 12 '20 at 17:46

0 Answers0