Discussion on: scrollIntoView is the best thing since sliced bread

View post

Replies for: Unfortunately scrollIntoView doesn't seem to behave consistently across platforms, and I have no idea why. I also created a horizontally scrolling ...

Stephen Belovarich • Apr 12 '19 • Edited

FWIW the post was about getting excited about a new API only to be disappointed.

I haven't experienced the issues you are having in Windows 10 Edge. The carousel animates in fine for me. Testing in Ubuntu 18.04 theres definitely some issues with vertical scrollbars that overflow-y: hidden fixes.

Here is my SCSS if it helps.

A tip for iOS Safari.

  -webkit-overflow-scrolling: touch;

You can set the look and feel of the scrollbar in Windows 10 to react similar to MacOS, where it autohides.

  -ms-overflow-style: -ms-autohiding-scrollbar;

This carousel is styled for a full page takeover, so set width and height to fit your container.

:host {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;

  .ctrl {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    &.is--left {
      left: 0px;
    }
    &.is--right {
      right: 0px;
    }
  }

  > .gallery {
    height: 100vh;
    display: flex;
    flex: 0 0 auto;
    > .slide {
      width: 100vw;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: auto;
        max-height: 60%;
        max-width: 60%;
        opacity: 0;
        transition: opacity 0.5s ease-out;
        &.is--visible {
          opacity: 1;
        }
      }
    }
  }
}

Thomas Werner • Apr 12 '19

Hmm... So the main difference in your case is that your carousel is full screen, which rules out vertical scrolling.

My CSS rules for the container are not too far off from yours:

overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;

My carousel is embedded in an infini-loading feed page, so vertical scrolling is an issue with that method.

<...short break for checking stuff....>

Sooooo.... I just tested Firefox on Ubuntu and it behaves the exact same way as Firefox on Windows and Mac OS X as well. It works. Kinda. So the horizontal scroll that brings the image into view does work there, but overall the carousel also scrolls to the top of the view port.

Out of curiosity I tested the latest Google Chrome on my old Mac Mini again. And lo and behold: Google Chrome is broken across Linux and Mac OS X (haven't tested Windows yet). scrollIntoView does not work anymore as expected. Well... it does scroll the entire carousel to the top of the view port, but the image is not brought into view. Looks like Google messed up something recently 😔

Stephen Belovarich • Apr 12 '19

The carousel being full screen makes no difference. If there is overflow of the container, vertical scrollbar will appear. There can still be issues with vertical scrollbars showing up in Ubuntu in particular without any apparent overflow.

I haven't seen this same issue with "the carousel also scrolls to the top of the view port." I've been testing in Chrome Canary with good results.

Thomas Werner • Apr 12 '19 • Edited

Ok, I just figured out what my issue is. I'm an idiot who doesn't read the documentation.

I ignored the options arguments inline and block so far. When I implemented my carousel on Mac OS X a couple months ago I only specified 'behavior': 'smooth' and skipped the other two properties. It gave me perfect results back then, and that seems to have changed recently (change of default values?).

Adding the two missing properties fixes the problem though. I get consistent results and scroll behavior in Firefox and Chrome and on both Linux and Mac:

child.scrollIntoView({behavior: 'smooth', inline: 'center', block: 'center'});

Ugh... Sorry for having been such a Debbie Downer here. On the other hand that little conversation with you made me actually look a bit harder and fix the problem in the end. I was about to roll my own scrollIntoView implementation because it looked totally broken to me.

So well... yay, scrollIntoView is actually awesome 😄

For anyone else coming by: please ignore this thread

Angel Daniel Munoz Gonzalez • Apr 13 '19

extra points for that gif

Johan Lindstrom • May 3 '20

Actually, this sub-thread detour specifically just helped me learn about this for a Vue app, so thanks for that everyone :)

roo kangaroo • Sep 23 '20

I used {block: "nearest"} instead of {block: "center"}. It prevents the vertical scroll.
I also developed a horizontal scroll-carousel. And it works really fine!