Prevent scroll bounce effect and pull-to-refresh on mobile using overscroll-behavior CSS property

preview_player
Показать описание
A quick CSS tip outlining how to easily prevent scroll past the top of the page and pull-to-refresh on mobile by setting `overscroll-behavior: none;` on html and body elements of a page.

Buy my course Mastering Prettier & Stylelint:

Subscribe to CSS Weekly Newsletter:

Keep up-to-date with CSS Weekly:

Keep up to date with what I'm up to:

- Zoran Jambor
#css #frontend
  1. CSS Weekly
  2. css
  3. frontend development
  4. webdev
  5. css disable bounce effect for scroll on ios - html
  6. prevent bounce effect on scroll - css
Рекомендации по теме
Prevent scroll bounce 0:00:51

Prevent scroll bounce effect and pull-to-refresh on mobile using overscroll-behavior CSS property

HTML : CSS: 0:01:19

HTML : CSS: Disable bounce effect for scroll on iOS 13

CSS : iOS: 0:01:32

CSS : iOS: disable bounce scroll but allow normal scrolling

CSS : Add 0:01:40

CSS : Add bounce effect to scroll

CSS : Prevent 0:01:23

CSS : Prevent scroll bounce for the body element, but keep it for child elements in iOS

Disable Scrollview Bounce 0:02:22

Disable Scrollview Bounce Effect with Titanium

CSS : IOS 0:01:18

CSS : IOS scrolling issues (elastic scroll and bounce)

Disable iOS bounce 0:00:49

Disable iOS bounce in Capacitor projects #shorts

Smooth Scroll Animations: 0:04:54

Smooth Scroll Animations: Bounce-in Effect with HTML, CSS, & Minimal JS

The 'scroll' event 0:07:11

The 'scroll' event in JavaScript | window.onscroll

jQuery : Prevent 0:01:15

jQuery : Prevent iOS bounce without disabling scroll ability

CSS : How 0:01:11

CSS : How to prevent white space 'bounce' after scrolling to the top of the page and the b...

Bounce In Right 0:04:27

Bounce In Right Animation on Scroll | Simple HTML, CSS & JS Tutorial

Scale Bounce Expression 0:01:00

Scale Bounce Expression

BOUNCE TEXT Animation 0:01:50

BOUNCE TEXT Animation in After Effects | NO EXPRESSIONS

Adobe AE - 0:00:14

Adobe AE - Text Scroll and Inertia Bounce Effect

How to Create 0:05:40

How to Create a Bounce Out Animation on Scroll with HTML & CSS

Bob Up and 0:03:27

Bob Up and Down Wobble Bounce Animation CSS Code - Elementor Wordpress Tutorial

HTML : How 0:01:06

HTML : How do I remove the bounce effect when translating away from the screen with css transition?

CSS Animation Hover 0:00:10

CSS Animation Hover Bounce

Galaxy S23's: How 0:01:06

Galaxy S23's: How to Enable/Disable Bounce Key

Pure CSS Smooth 0:05:38

Pure CSS Smooth Scrolling Animation With Just 1 Line of Code

🤔CSS ONLY!!😍CSS Creative 0:05:04

🤔CSS ONLY!!😍CSS Creative Bounce Effect using HTML and CSS | CSS Button Hover Effects

3 Effects of 0:01:58

3 Effects of Having a HIGH Bounce Rate on a Website | Whiteboard Marketing

Комментарии
Автор

THANK YOU VERY MUCH! This has been driving me mad for months now.

I was stuck with complicated solutions until this!

mrvfino
Автор

u just made me the happiest man on the whole planet, i have been searching for this since April 2024, thank u so much for this u just saved my life😂❤❤❤

laith
Автор

Holy sh*t! Thanks for this! Been bugging me for days! Finally fixed!

DarylMalibiran
Автор

Where do i give this css style in the body tag, or root. Or html...Im using next js. I used this in body tag, but still the scroll issue was there..please helpppp

SkaiDex
Автор

It is interesting that this prevents refreshing. I would have totally expected this to need JavaScript, since it affects the functionality of the page.

ScriptRaccoon
Автор

How do I get to "overscroll behavior", please, for laymen? :-)

eddiemattison
Автор

sorry non-tech person here, how do I add or edit this after I inspect element? thanks

bryanatas
Автор

I don’t know if you’ll see this but do you have an idea how I can get the toolbar and address bar to collapse/disappear when I’m scrolling on iOS mobile for a webpage (css or js?)

shilohnjoku