Comments (6)
I implemented a Workaround like this:
// fix scroll snap vs scroll-behavior-polyfill fight
const disableScrollSnap = () => document.scrollingElement.style.scrollSnapType = 'none';
const enableScrollSnap = () => document.scrollingElement.style.scrollSnapType = '';
window.addEventListener('wheel', enableScrollSnap, passiveEvents.hasSupport ? {passive: true} : false);
window.addEventListener('touchstart', enableScrollSnap, passiveEvents.hasSupport ? {passive: true} : false);
document.addEventListener('click', disableScrollSnap, true);
disableScrollSnap();
This needs to be in the block executed when the polyfill is loaded.
from scroll-behavior-polyfill.
Hi there. Sorry for the late reply! Thanks for bringing this to my attention. I'll see if I can add special case handling for this. Do you have a repro I can take a look at where I can easily replicate the behavior you are observing in Safari?
from scroll-behavior-polyfill.
I tried to create a small fiddle but it had the problem that safari does not seem to support scroll-snap in iframes? I'm not entirely sure but I created a small html file that reproduces it:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
html, body {
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
[id^=a] {
height: 90vh;
border: 5px solid black;
scroll-snap-align: center;
}
[id^=a]:nth-child(odd) {
background-color: green;
}
</style>
</head>
<body scroll-behavior="smooth">
<ul style="position: fixed; left: 0; top: 0; background: white;">
<li><a href="#a1">anker1</a></li>
<li><a href="#a2">anker2</a></li>
<li><a href="#a3">anker3</a></li>
<li><a href="#a4">anker4</a></li>
</ul>
<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
<div id="a4">4</div>
<script crossorigin src="https://polyfill.app/api/polyfill?features=scroll-behavior"></script>
</body>
</html>
from scroll-behavior-polyfill.
Thanks for your repro!
I've fixed this issue and have released it as part of v2.09. It isn't yet live on polyfill.app if that's what you're using. Please report back to me if you still experience issues.
from scroll-behavior-polyfill.
Just as a point of reference - I am using:
- Safari iOS 15 Beta 4
- Native
CSSOM View Smooth Scrolling
experimental feature enabled - No polyfill
And I still see this awful 'fighting' behavior when doing element.scrollTo({ behavior: 'smooth', left: 1000 })
(which would skip several slides) - even with the native scrolling (which is still behind a flag).
scroll-snap-stop: normal
is supposed to allow scrolling to 'pass over' snap stops but it just doesn't seem to work.
from scroll-behavior-polyfill.
I can confirm, scrollTo
doesn't work with scroll-snap-type
applied to an element.
from scroll-behavior-polyfill.
Related Issues (20)
- scrollIntoView should default to block: "start" HOT 2
- Comparison to iamdustan/smoothscroll HOT 2
- IE 11 HTMLElement.scrollIntoView() doesn't execute HOT 6
- Polyfilled smooth scroll slower than native implementations with long distances HOT 1
- Cannot read property 'set' of undefined HOT 1
- Polyfill is not applied in Edge 87 & Chrome 87 (Windows 10) HOT 4
- TypeError: e is not an Object. (evaluating '"style"in e') HOT 1
- `scroll-padding` is ignored
- Support for non-object syntax. HOT 1
- catchNavigation click causes error when using hash for routing
- Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': 'xxx' is not a valid selector. HOT 1
- publish minimized version for jsdelivr HOT 2
- Is really needed polyfill in 2k22?
- node >= 9.0.0 HOT 2
- Anchor Bug in Edge and Safari HOT 12
- TypeScript 3.5 compatibility issue HOT 1
- not compatible with SSR HOT 11
- Issue with dynamic import: "'index.d.ts' is not a module" HOT 1
- anchor detection if the link also contains a path fails HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scroll-behavior-polyfill.