Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)

UPDATE 2017.12: For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it. html, body { overscroll-behavior-y: none; } Safari however does not support it … UPDATE 2021.06: The workaround below no longer seems to work in recent iOS/MobileSafari versions …

rafscroll – chain your scroll events to requestAnimationFrame

new rafscroll(function() { // Do your thing here. }); Your monitor refreshes at 60 frames per second (fps). Scroll events, on the other hand, do not. Chaining your scroll events to a requestAnimationFrame ensures that your transitions and animations will refresh each time the monitor refreshes, rather than each time a scroll event is fired. …

Space.js – HTML-driven narrative 3D-scrolling

For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created an open-source and free to use JavaScript library i call space.js. It’s basically parallax technologies …

Everybody Scrolls.

We wanted to know how page design impacts user behaviors and to what extent visual cues help users scroll below the fold. To find out, we conducted user testing with 48 participants over 3 days. Everybody Scrolls. → Sidenote: Reminds me of this good old “Life below 600px” Related: Luke Wroblewski also tweeted a few …

ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages

<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and …

scrollReveal.js – Easily reveal elements as they enter the viewport

<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute …

Icons changing colors on scroll

Quite a simple technique: use :before and :after to inject two colored panels, each taking up 50% of the height. Then lay your inverted icons on top of them, and presto. Icons Filling Effect → Icons Filling Effect Demo → If you like this, you’ll definitely like these too: Skrollr – CSS animations linked to …

Scroll Depth – A Google Analytics plugin for measuring page scrolling

Scroll Depth is a small Google Analytics plugin that allows you to measure how far down the page your users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll points, sending a Google Analytics Event at each one. You can also track when specific elements on the page are scrolled into view. On …

Skrollr – CSS animations linked to scroll position

Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: <div id="example" data-0="width:100%;" data-1500="width:0%;"></div> Skrollr …