css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda adipisci quia aut facilis, commodi rem debitis culpa. Dolorem, doloremque, odio, omnis dolores itaque praesentium laudantium velit nostrum labore recusandae molestias?</p>
<p>Inventore aperiam eligendi minima nisi consectetur recusandae numquam alias dignissimos repellat corporis asperiores, animi earum, odit suscipit aliquid? Tempore quasi molestiae eligendi accusantium possimus voluptatum nesciunt animi libero earum aspernatur.</p>
<p>Repudiandae nulla natus dignissimos sapiente velit minima quam odio explicabo, nobis ipsa obcaecati libero unde nam soluta, voluptatibus quia accusantium, modi reiciendis culpa deleniti atque. Tempore voluptatibus autem officia illum.</p>
<p>Libero aspernatur excepturi quaerat soluta numquam repellendus fuga ipsam eveniet quidem a laudantium nulla magni, dolorum optio repudiandae maxime odit aliquid laboriosam nostrum modi, eos commodi sapiente accusamus. Ullam, quis?</p>
<p>Neque pariatur molestias possimus amet, provident nam! Dolores, inventore. Inventore voluptatibus, dolorem in ipsum laboriosam consequatur iure maiores nobis saepe rem autem, quisquam amet, error repudiandae eum itaque assumenda voluptatem.</p>
<p>Ab tempore, asperiores laudantium adipisci delectus labore velit recusandae eos eveniet reprehenderit sit, voluptates ducimus nulla voluptas et reiciendis ex doloribus nemo explicabo possimus dolor id molestiae. Enim, similique quaerat!</p>
<p>Dolorem quas asperiores odit sint ut quia neque molestias voluptates, adipisci distinctio vero aperiam ipsa accusantium aliquam veritatis magnam labore, officia perferendis quasi beatae cumque expedita tenetur pariatur. Saepe, error.</p>
<p>Perferendis velit molestiae earum vero suscipit minus? Officiis odit facere laudantium quibusdam nemo impedit similique, eum voluptates fugit, tempora distinctio delectus ut consequatur nihil quo, maiores eaque blanditiis perferendis omnis?</p>
<p>Earum doloribus asperiores iusto iure facere atque molestiae? Hic assumenda ratione sequi, illo vero soluta accusantium reprehenderit quisquam corrupti magnam pariatur voluptates dicta doloribus illum sed ipsum et molestiae explicabo.</p>
<p>Qui tenetur ducimus temporibus laborum magnam iure corporis eius nesciunt nisi excepturi explicabo, obcaecati enim quod et est illo adipisci expedita iste cum nam. Labore possimus autem similique dolorum tempore.</p>
<p>Sapiente voluptatum fugiat ipsam sunt a distinctio temporibus aliquam cupiditate amet? Expedita recusandae autem eius porro esse, libero assumenda adipisci fugit aspernatur odit dolorum optio earum fugiat, vero minus debitis!</p>
<p>A aspernatur officia, iusto numquam architecto doloremque pariatur alias tenetur commodi quo doloribus delectus sed impedit, quidem odit. Enim illum natus nemo quasi aspernatur voluptatibus ea exercitationem eos alias et.</p>
<p>Reiciendis impedit libero ipsum ullam nulla hic nesciunt blanditiis at necessitatibus quae magnam animi, vel ipsam placeat. Accusamus ex quam molestiae, esse eveniet vitae adipisci minus voluptate enim sapiente iure!</p>
<p>Labore voluptas nisi ex sit repellendus dolorem dolores excepturi cum, omnis, aperiam quisquam eius, modi iusto consequatur velit ipsa cupiditate. Culpa molestias dicta non mollitia distinctio nesciunt, eaque omnis possimus!</p>
<p>Facere fuga minima blanditiis rem necessitatibus asperiores omnis. Possimus repellat, veritatis modi saepe molestiae, magni dolorum nam ullam exercitationem doloremque quod, consequuntur corporis reprehenderit id illum hic nulla sequi eius.</p>
<p>Asperiores magni ad deleniti vel aperiam inventore illo blanditiis accusamus quidem quam? Fuga odio optio, eligendi sit soluta nulla libero, voluptatem corrupti commodi assumenda itaque in possimus esse consequuntur animi.</p>
<p>Beatae quidem quos illum exercitationem neque, ea saepe cupiditate molestiae, possimus, corrupti numquam excepturi temporibus officiis quibusdam. Soluta pariatur qui, aut, inventore eaque necessitatibus eius alias excepturi earum veritatis omnis.</p>
<p>Molestias mollitia cupiditate optio provident enim, reiciendis tempore veritatis fugiat voluptate harum saepe nihil cumque vitae minus architecto tempora maxime necessitatibus quos eveniet suscipit aut. Non ipsam dolorum ipsum ut.</p>
<p>Architecto porro minima, quae distinctio debitis est velit deserunt eaque perspiciatis veniam sint praesentium placeat voluptatum, esse iure dolor enim ad commodi tempore! Deserunt iste voluptatum pariatur doloremque perferendis voluptates!</p>
<p>Qui quisquam ex excepturi delectus culpa veniam nemo iste cum vitae natus! Omnis totam vitae, cum asperiores id nemo voluptatum ut facilis nihil! Autem, libero neque blanditiis aspernatur tempora eveniet.</p>
            
          
!
            
              body {
  max-width: 500px; 
  margin: 0 auto;
  font: 17px/1.4 system-ui;
}

            
          
!
            
              const scrollElement = (element, scrollPosition, duration) => {
  
  // useful while testing to re-run it a bunch.
  // element.removeAttribute("style"); 
  
  const style = element.style;
  style.transition = duration + 's';
  style.transitionTimingFunction = 'ease-in-out';
  style.transform = 'translate3d(0, ' + -scrollPosition + 'px, 0)';
}

scrollElement(
  document.body, 
  (
    document.body.getBoundingClientRect().height
    -
    document.documentElement.clientHeight
    +
    25
  ),
  5
);

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console