# Horizontal Scrolling

# Markup

  class="section section-fullheight section-content section-fullscreen-columns section-horizontal-scroll js-section-horizontal-scroll bg-light-1"
    class="section__content section-horizontal-scroll__wrapper"
    <div class="d-flex flex-wrap flex-lg-nowrap w-100vw h-lg-100vh-fix-bar">
        class="section-fullscreen-columns__header d-flex flex-wrap col-lg-6 pt-xlarge pb-large container-fluid"

# Elements

  • data-arts-horizontal-scroll="container" – outer element for the horizontal scrolling scene.
  • data-arts-horizontal-scroll="wrapper" – wrapper element which will be translated. Works only with wrapper scrolling type.
  • data-arts-horizontal-scroll="section" – inner elements which will be translated one-by-one. Works only with modular scrolling type.

# Attributes

  • data-arts-horizontal-scroll="container" – outer element for the horizontal scrolling scene.
  • data-arts-horizontal-scroll-type=[ wrapper | modular ] – translating the long container may degrade the page rendering performance. Choose modular to translate only visible sections with the improved performance. Choose wrapper when you have multiple horizontal scrolling sections on a page.
  • data-arts-horizontal-scroll-toggle-class=[ in-view | class] – optional class applied to inner sections [data-arts-horizontal-scroll="section"] when they become in view. Works only with modular scroll type.

# Showcase

  • 📄 007-portfolio-horizontal-scrolling-columns-1.html
  • 📄 008-portfolio-horizontal-scrolling-columns-2.html
  • 📄 013-portfolio-details-masthead-boxed-horizontal.html
  • 📄 019-portfolio-details-masthead-boxed-horizontal.html