Search code examples
javascripthtmlcssmobile-website

CSS or Javascript "help scrolling" horizontally, keeping its items at full width

Is there a way to make animated scrolling "automatic" ?, keeping one element full width each scroll. I wound like to have the case B . With "automatic" I mean like it helps you with scrolling preventing the case A(unless you are still pressing the screen,but as you release your finger or mouse it automatically scroll It for you based on the percentage of near divs showing)

enter image description here

Right now my all-divs wrapper looks like so :

    .scrolling-wrapper {
         overflow-x: scroll;
         overflow-y: hidden;
         white-space: nowrap;
    }

with each div like :

.card {
    display: inline-block;
     width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  }
Solution

  • This is what the CSS scroll snap is for; unfortunately, it's not completely supported everywhere. Chrome and Opera are the only browsers that support scroll-snap-stop; all browsers except IE and Edge support scroll-snap-align; and every browser supports some form of scroll-snap-type.

    You can use this to your advantage. Note that IE/Edge support a slightly different version of this property than other browsers (I know, we're all shocked) so if you want to support them, you'll have to use vendor prefixes. So put this style on the wrapper:

    .scrolling-wrapper {
    scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: mandatory;
}