Comments (6)
Hey there. Are you attaching a shadow root to your scrolling element? In any case, there should be no issues since this polyfill is built with full Shadow DOM support. Is there a way for you to provide me with a simple reproduction of this problem that occurs so I can investigate it? scrollIntoView
at least under some circumstances should work just fine in IE 11, so I'd like a repro to work from
from scroll-behavior-polyfill.
I'm using this inside of a React-based application, so no shadow DOM, just the normal DOM of the page. I can confirm the element is mounted before I load the polyfill. I'm on mobile right now, but I'll share a CodeSandbox link when I'm on my home machine. Note that scrollTo works with this polyfill; it's only scrollIntoView that's not working as expected.
from scroll-behavior-polyfill.
Oh, alright. You mentioned it was a custom element, so I figured you might be using Shadow DOM. Anyway, that sounds great. I'll take a look at it when you have it. And thanks for reporting this bug!
from scroll-behavior-polyfill.
Here is a reproducable error: https://codesandbox.io/s/crazy-hopper-nfp2l
Let me know if you can see the issue on IE11.
Edit: I just tried to load CodeSandbox in IE 11 on Browserstack and it doesn't work π¬
from scroll-behavior-polyfill.
Hello, I believe I ran into the same issue, this polyfill was included in a project where a non-functional scrollIntoView call was reported as a bug when using IE11, I suspect it might have to do with our specific layout, but I created an example barebones react app that reproduces the broken behavior. Due to none of the code editors I found online actually working in IE11 I'm π attaching the app as a zip, extract it then run
npm install
npm install -g serve
npm build
serve -s build
If you open the URL the last command prints in current stable Chrome/Firefox and IE11 you can see that pressing the button to scroll to the element at the 500th index does nothing in IE while it works in other browsers. In my experience this is because an element in the list of parents actually appears scrollable, but when you set its scrollTop then try to look at it immediately after it remains unchanged at 0. Before I discovered this polyfill was already pulled in I wrote my own solution in TypeScript which seemed to do the trick, just trying to scroll all parents until one of them actually accepts the change. Hopefully this helps in finding a proper solution:
/**
* This is a polyfill for the HTMLElement.scrollIntoView function for IE11
* Based on https://github.com/tidal-engineering/ie11-scroll-into-view
*/
export const applyScrollIntoViewPolyfill = () => {
const isIE = typeof window !== 'undefined' && window.navigator.userAgent.indexOf('Trident/') > 0;
if (!isIE) return;
const getComputedStyle = (el: HTMLElement): CSSStyleDeclaration => window.getComputedStyle(el, null);
const overflowScrollable = (text: string) => text === 'scroll' || text === 'auto' || text === 'visible';
const isXScrollable = (elem: HTMLElement) => (
elem.clientWidth < elem.scrollWidth
&& overflowScrollable(getComputedStyle(elem).overflowX)
);
const isYScrollable = (elem: HTMLElement) => (
elem.clientHeight < elem.scrollHeight
&& overflowScrollable(getComputedStyle(elem).overflowY)
);
const hasScrollbar = (elem: HTMLElement) => isYScrollable(elem) || isXScrollable(elem);
const offsetTop = (el: HTMLElement) => el.getBoundingClientRect().top;
/** @return A list of parent elements that are likely to be scrollable */
function findScrollableParents(el: HTMLElement): HTMLElement[] {
let checkElement: HTMLElement = el;
const scrollableParents = [];
while (checkElement !== null) {
if (hasScrollbar(checkElement))
scrollableParents.push(checkElement);
checkElement = checkElement.parentNode as HTMLElement;
}
return scrollableParents;
}
/**
* Turns out IE11 just "gives up" when the native scrollIntoView method is called with
* the current layout, so we need to manually try to scroll all scrollable parents
* until one of them bites.
*/
const ieScrollIntoView = (el: HTMLElement) => findScrollableParents(el).some(scrollContainer => {
const elOffsetTop = offsetTop(el);
// Stop scrolling if element is at the top
if (elOffsetTop < 1.2) return true;
const containerScrollTop = scrollContainer.scrollTop;
const containerOffsetTop = offsetTop(scrollContainer);
const newScrollTop = containerScrollTop - containerOffsetTop + elOffsetTop;
scrollContainer.scrollTo(scrollContainer.scrollLeft, newScrollTop);
});
HTMLElement.prototype.scrollIntoView = function () {
ieScrollIntoView(this);
};
};
from scroll-behavior-polyfill.
This also doesn't work on Chrome for Android, at least on versions 38.0.2125 through 68.0.3440
from scroll-behavior-polyfill.
Related Issues (20)
- scrollIntoView should default to block: "start" HOT 2
- Comparison to iamdustan/smoothscroll HOT 2
- 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
- css scroll-snap fights scroll animation HOT 6
- 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.