Skip to content

Instantly share code, notes, and snippets.

@mxmason

mxmason/webflow-disable-scroll-prefers-reduced-motion.js

Last active June 2, 2023 10:49
Show Gist options
  • Save mxmason/a932795b9bea7cc616cb9d01727e5771 to your computer and use it in GitHub Desktop.
Save mxmason/a932795b9bea7cc616cb9d01727e5771 to your computer and use it in GitHub Desktop.
Download ZIP
These snippets completely disable the smooth-scroll animation that is present on all Webflow sites. Animated scrolling can disorient or surprise users, or even cause motion sickness!
Raw
webflow-disable-scroll-prefers-reduced-motion.js
// Disable smooth scrolling for users who have set `prefers-reduced-motion` in their operating system
// 1. Place this snippet before the end of the <body> tag;
// NOT in the <head> tag!
// 2.Make sure it's inside $(function() {})!
$(function() {
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mediaQuery.matches) $(document).off('click.wf-scroll');
})
Raw
webflow-disable-scroll.js
// Disable smooth scrolling for ALL users
// 1. Place this snippet before the end of the <body> tag;
// NOT in the <head> tag!
// 2. Make sure it's inside $(function() {})!
$(function() {
$(document).off('click.wf-scroll');
})
@curiouslychase
Copy link

Thanks for this @mxmason!

@juliettepxv
Copy link

THANKS! This scroll and history stuff are a nightmare!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment