Comments (13)
Oh yeah ignore that commented out promise for now i will be doing dynamic imports as soon as the stack allows, then i will uncomment the promise and delete the static imports of course don't want it importing twice!
Ok yeah good shout I'm front end rendering so i'll shift it into my render.
I will setup a sandbox now bro
from smoothscroll-anchor-polyfill.
Im in ie11 on Mac OS using browserstack, however the same issue has been replicated on a number of machines/OS's
seems, to be the same for ie 9, 10 and 11
from smoothscroll-anchor-polyfill.
I'll look into it, thanks for reporting!
If you visit the documentation site in Internet Explorer, do you get the same error? It is itself built with this polyfill after all
from smoothscroll-anchor-polyfill.
Hmm, it's working fine for me in Internet Explorer 11 on Windows 10.
Could go give me more information (which version/file are you using, are you using it in combination with smoothscroll-polyfill
?), or ideally a link to a reproduction so I can see it myself?
Sidenote: if you use smoothscroll-polyfill in combination with this, it won't work out-of-the-box in IE9 as smoothscroll-polyfill requires requestAnimationFrame
. The error you see should come from smoothscroll-polyfill then though, not from this package.
from smoothscroll-anchor-polyfill.
Thanks for a speedy response!
Ok the demo is working for me too...
smoothscroll-anchor-polyfill v 1.3.0
smoothscroll-polyfill v 0.4.4
Im calling smoothscrollPolyfill.polyfill(); on componentDidMount
if i comment out the anchor polyfill my app loads with no error.
below is my import method and init
import smoothscrollPolyfill from 'smoothscroll-polyfill';
import 'smoothscroll-anchor-polyfill';
import { SmoothScroll, Sidenav } from './StickySideNav.styles';
class StickySideNav extends PureComponent {
componentDidMount() {
window.addEventListener('scroll', throttle(this.stickySidebar, 100));
smoothscrollPolyfill.polyfill();
// when we can code split use the below to import this poly
// if (!('scrollBehavior' in document.documentElement.style)) {
// Promise.all([import('smoothscroll-polyfill'), import('smoothscroll-anchor-polyfill')]).then(([smoothscrollAnchorPolyfill]) => {
// smoothscrollAnchorPolyfill.polyfill();
// });
// }
}
componentWillUnmount() {
window.removeEventListener('scroll', this.stickySidebar);
}
from smoothscroll-anchor-polyfill.
from smoothscroll-anchor-polyfill.
I think its something to do with formatting you know...
If i grab this: https://unpkg.com/[email protected]/dist/index.min.js
and save locally without formatting and import it, it works fine, if i format it, it errors.
Here is the formatted file if you were interested:
let e, t;
(e = function() {
return new function() {
let e = this,
t = 'undefined' != typeof window;
if (t)
var n = window,
o = document,
r = o.documentElement,
i = o.createElement('a');
if (
((this.polyfill = function(r) {
if (((r = r || {}), t)) {
let l = n.__forceSmoothscrollAnchorPolyfill__,
a = 'boolean' == typeof r.force ? r.force : l;
if ('scrollBehavior' in i.style && !a) return e;
e.destroy(),
o.addEventListener(
'click', p, !1
),
o.addEventListener('scroll', S),
n.addEventListener('hashchange', b);
}
return e;
}),
(this.destroy = function(r) {
return (
(r = r || {}),
t &&
(o.removeEventListener(
'click', p, !1
),
o.removeEventListener('scroll', S),
n.removeEventListener('hashchange', b)),
e
);
}),
t)
) {
var l = !1;
try {
let a = Object.defineProperty(
{}, 'preventScroll', {
get: function() {
l = !0;
},
}
);
i.focus(a);
} catch (e) {}
var c,
s = /scroll-behavior:[\s]*([^;"`'\s]+)/,
u = getComputedStyle(r),
f = [];
}
function h() {
for (
let e = [
r.style.scrollBehavior,
(s.exec(r.getAttribute('style')) || [])[1],
u.getPropertyValue('--scroll-behavior'),
(s.exec(u.fontFamily) || [])[1],
],
t = 0;
t < e.length;
t++
) {
let n = ((i = void 0),
(i = null),
(o = (o = e[t]) && o.trim()),
/^smooth$/.test(o) && (i = !0),
/^(initial|inherit|auto|unset)$/.test(o) && (i = !1),
i);
if (null !== n) return n;
}
let o, i;
return !1;
}
function v(e) {
if (!/^a$/i.test(e.tagName) || !/#/.test(e.href)) return !1;
let t = e.pathname;
return '/' !== t[0] && (t = '/' + t), e.hostname === location.hostname && t === location.pathname;
}
function d(e) {
if ((e.focus({ preventScroll: !0 }), o.activeElement !== e)) {
let t = e.getAttribute('tabindex');
if ((e.setAttribute('tabindex', '-1'), 'none' === getComputedStyle(e).outlineStyle)) {
let n = e.style.outlineStyle;
(e.style.outlineStyle = 'none'),
e.addEventListener('blur', function o() {
(e.style.outlineStyle = n), e.setAttribute('tabindex', t), e.removeEventListener('blur', o);
});
}
e.focus({ preventScroll: !0 });
}
}
function y(e) {
if ('string' != typeof e) return null;
let t = (e = (function(e) {
try {
e = decodeURIComponent(e);
} catch (e) {}
return e;
})(e))
? o.getElementById(e.slice(1))
: o.body;
return '#top' !== e || t || (t = o.body), t;
}
function m(e) {
l || clearTimeout(c),
e === o.body
? n.scroll({ top: 0, left: 0, behavior: 'smooth' })
: e.scrollIntoView({ behavior: 'smooth', block: 'start' }),
l ? d(e) : (c = setTimeout(d.bind(null, e), 450));
}
function p(e) {
if (!(e.metaKey || e.ctrlKey || e.shiftKey || 0 !== e.button) && h()) {
let t = (function e(t, n) {
return n(t) ? t : t.parentElement ? e(t.parentElement, n) : null;
})((function(e) {
return (e = e || n.event).target || e.srcElement;
})(e),
v);
if (t) {
let r = t.hash,
i = y(r);
i && (e.preventDefault(), m(i), history.pushState && history.pushState(
null, o.title, r || '#'
));
}
}
}
function b() {
if (o.body && h()) {
let e = y(location.hash);
if (e) {
let t = E(),
r = f[f[1] === t ? 0 : 1];
n.scroll({ top: r, behavior: 'instant' }), m(e);
}
}
}
function E() {
return r.scrollTop || o.body.scrollTop;
}
function S() {
o.body && ((f[0] = f[1]), (f[1] = E()));
}
}().polyfill();
}),
!(t = this && this.__sap_ES_MODULE__) && 'function' == typeof define && define.amd
? define([], e)
: !t && 'object' == typeof module && module.exports
? (module.exports = e())
: (this.SmoothscrollAnchorPolyfill = e());
from smoothscroll-anchor-polyfill.
Thanks for the follow-up!
A few things:
- If you uncomment the part at the bottom, you're importing both polyfills twice! Once at the top of the file using static imports, then again inside the
componentDidMount
hook, there using dynamic imports.
Either just use static imports:
import smoothscrollPolyfill from "smoothscroll-polyfill"
import "smoothscroll-anchor-polyfill"
smoothscrollPolyfill.polyfill()
OR use dynamic imports:
if (!('scrollBehavior' in document.documentElement.style)) {
Promise.all([import('smoothscroll-polyfill'), import('smoothscroll-anchor-polyfill')]).then(([smoothscrollPolyfill]) => {
smoothscrollPolyfill.polyfill();
});
}
- I see no need to put any of this into the
componentDidMount
hook. (unless you use Server-Side-Rendering, but in that case you'll also have to do cleanup incomponentWillUnmount
)
from smoothscroll-anchor-polyfill.
Huh, interesting that the formatting changes things!
I'm on the go at the moment, but will investigate this further this evening. Would be super helpful if you could create a repro on CodeSandbox: https://codesandbox.io/s/new
from smoothscroll-anchor-polyfill.
Oh, very quick: does your issue go away if you do
import 'smoothscroll-anchor-polyfill/dist/index.min.js';
instead of import 'smoothscroll-anchor-polyfill'
?
from smoothscroll-anchor-polyfill.
wow thats fixed it?!? please explain :D ... i will do some further testing but yeah this seems to have done the trick!
Meanwhile i was setting up a code sandbox and was intrigued to find out it doesn't respect anchors to ID's: https://codesandbox.io/s/es9sx
Whereas codepens fine: https://codepen.io/Redcoat/pen/gNRLyJ
Weird!
from smoothscroll-anchor-polyfill.
The package has two versions:
index.min.js
, which is written in a way to work both directly in the browser (then available onwindow.SmoothscrollAnchorPolyfill
) and when imported as module, as long as you use a bundler like webpack to do so- and
index.min.mjs
, which is written as a native JavaScript module withimport
andexport
so that modern browsers can directly import it from within<script type="module">
(also has some other benefits)
The first, "universal" version is transpiled to only use JS that is safe in old browsers like IE, but the second, "modern" version uses modern JavaScript, e.g. const
. If you use this second version, which bundlers like webpack do by default unless you explicitly point them at a specific file, you need to transpile the code yourself (with Babel) so that it becomes IE-compatible.
create-react-app
automatically does this for you – but since your comment above implied that your stack does not allow for dynamic imports, I realized your React project is probably not based on create-react-app
and does not have the respective configuration.
(in case you're using webpack with your own config, you probably have some rule regarding "babel-loader" in there which excludes everything inside node_modules from being handled by Babel)
Ok yeah good shout I'm front end rendering so i'll shift it into my render.
Please don't shift it into render 😬 The polyfill method is meant to run once – it starts the polyfill, then it's done, while render is called over and over again when React updates your app. Put it outside the component, so it only runs a single time when your app starts.
Meanwhile i was setting up a code sandbox and was intrigued to find out it doesn't respect anchors to ID's: https://codesandbox.io/s/es9sx
Whereas codepens fine: https://codepen.io/Redcoat/pen/gNRLyJ
Weird!
Very weird indeed, and probably worth a bug report! 😅
from smoothscroll-anchor-polyfill.
Great thanks so much for your help and the explanation, nice one!
ah god damn, long day yesterday :D thanks again man
from smoothscroll-anchor-polyfill.
Related Issues (20)
- ESM support
- Expose shouldSmoothscroll() as part of public API
- Add example implementations
- Handle prefers-reduced-motion HOT 1
- Firefox Android: anchor#top doesn't trigger smooth scroll
- :target pseudo-class is not toggled
- Support custom property --scroll-behavior HOT 1
- Example/Possible Alternative Blink Recognition? HOT 1
- Bail out when query params don't match
- doesnt work in IE11 HOT 4
- Bailout if defaultPrevented === true HOT 9
- Doesn't work with <a name="named-anchor"> HOT 2
- Support scroll-padding HOT 11
- window.scrollTo with behavior: 'smooth' doesn't scroll to the top of the page with safari HOT 1
- Smooth scroll on focus change HOT 4
- Demo doesn't work as-is on Safari 14.0.3 HOT 4
- I can't get it to work in a React NextJS project HOT 2
- Polyfill removes path from URL on anchor click HOT 8
- Support scroll-margin HOT 3
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 smoothscroll-anchor-polyfill.