Make div or list scroll horizontally with overflow hidden

horizontal-scroll.scss

/*
Demo:
Codepen: https://codepen.io/shivamupr/full/GmeMOR/
(Check it in mobile view mode)

List Scroll: https://vimeo.com/218911885
Div Scroll: https://vimeo.com/218911851
*/

.scrl {
  white-space: nowrap;

  &--l {
    overflow: hidden;
    overflow-x: auto;
    display: block;

    &__f {
      position: relative;
      left: -5%;
      width: 110%;
      padding: 0 20px;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
      outline: 1px solid transparent;
    }
  }
}