Code Monkey home page Code Monkey logo

Comments (13)

3andy avatar 3andy commented on June 2, 2024 1

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.

3andy avatar 3andy commented on June 2, 2024

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.

jonaskuske avatar jonaskuske commented on June 2, 2024

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.

jonaskuske avatar jonaskuske commented on June 2, 2024

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.

3andy avatar 3andy commented on June 2, 2024

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.

3andy avatar 3andy commented on June 2, 2024

also dude just FYI
Screenshot 2019-06-24 at 15 11 21

from smoothscroll-anchor-polyfill.

3andy avatar 3andy commented on June 2, 2024

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.

jonaskuske avatar jonaskuske commented on June 2, 2024

Thanks for the follow-up!

A few things:

  1. 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();
  });
}
  1. 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 in componentWillUnmount)

from smoothscroll-anchor-polyfill.

jonaskuske avatar jonaskuske commented on June 2, 2024

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.

jonaskuske avatar jonaskuske commented on June 2, 2024

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.

3andy avatar 3andy commented on June 2, 2024

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.

jonaskuske avatar jonaskuske commented on June 2, 2024

The package has two versions:

  • index.min.js, which is written in a way to work both directly in the browser (then available on window.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 with import and export 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.

3andy avatar 3andy commented on June 2, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.