URL with hash links. With Firefox, it doesn't work properly.

Question

URL with hash links. With Firefox, it doesn't work properly.

mrWilson123 opened this issue 3 years ago · comments

mrWilson commented 3 years ago

Try the same thing with Firefox, it doesn't work properly.

Originally posted by @mrWilson123 in #360 (comment)

Daofeng Wu commented 3 years ago

Any demo?

mrWilson · Answer 1 · Sat Jan 29 2022 07:00:51 GMT+0800 (China Standard Time)

Sorry. Here is the demo: https://cdpn.io/pen/debug/RwjWbWG?authentication_hash=xnMabmDQpZBr#active

Code: https://codepen.io/mrWilson123/pen/RwjWbWG

Tested and works with browsers: Chrome, Opera, Edge. Can anyone please check this with Safari?

It does not work with Firefox properly. It messed up layouts and some parts are missing.

Daofeng Wu · Answer 2 · Sat Jan 29 2022 09:46:32 GMT+0800 (China Standard Time)

Thanks for the demo.

The problem with your code is that scrollbar.scrollIntoView() is called before the document is ready. You can use the following AnchorPlugin to fix it:

import { ScrollbarPlugin } from 'smooth-scrollbar';

export class AnchorPlugin extends ScrollbarPlugin {
  static pluginName = 'anchor';

  onHashChange = () => {
    this.jumpToHash(window.location.hash);
  };

  // remove this if you don't need hash links to work
  onClick = (event) => {
    const { target } = event;

    if (target.tagName !== 'A') {
      return;
    }

    const hash = target.getAttribute('href');

    if (!hash || hash.charAt(0) !== '#') {
      return;
    }

    this.jumpToHash(hash);
  };

  jumpToHash = (hash) => {
    const { scrollbar } = this;

    if (!hash) {
      return;
    }

    scrollbar.scrollIntoView(document.querySelector(hash), {
      offsetTop: -scrollbar.containerEl.scrollTop
    });
  };

  onInit() {
    this.jumpToHash(window.location.hash);

    window.addEventListener('hashchange', this.onHashChange);

    this.scrollbar.contentEl.addEventListener('click', this.onClick);
  }

  onDestory() {
    window.removeEventListener('hashchange', this.onHashChange);

    this.scrollbar.contentEl.removeEventListener('click', this.onClick);
  }
}

// usage
Scrollbar.use(AnchorPlugin);

Full-page demo: https://20rex.csb.app/#active
Source: https://codesandbox.io/s/anchor-plugin-smooth-scrollbar-20rex?file=/src/anchor-plugin.js

(I forked yours to codesandbox as I cannot open the debug view.)

mrWilson · Answer 3 · Sat Jan 29 2022 19:16:25 GMT+0800 (China Standard Time)

Thank you for your reply, but how do I make it work with CodePen? I do not understand. I tried, but no luck. :(

I get every time "Uncaught SyntaxError: Cannot use import statement outside a module"

Daofeng Wu · Answer 4 · Sat Jan 29 2022 19:19:50 GMT+0800 (China Standard Time)

You can remove the import/export statement and use the global window.Scrollbar:

class AnchorPlugin extends Scrollbar.ScrollbarPlugin {
  static pluginName = 'anchor';

  onHashChange = () => {
    this.jumpToHash(window.location.hash);
  };

  // remove this if you don't need hash links to work
  onClick = (event) => {
    const { target } = event;

    if (target.tagName !== 'A') {
      return;
    }

    const hash = target.getAttribute('href');

    if (!hash || hash.charAt(0) !== '#') {
      return;
    }

    this.jumpToHash(hash);
  };

  jumpToHash = (hash) => {
    const { scrollbar } = this;

    if (!hash) {
      return;
    }

    scrollbar.scrollIntoView(document.querySelector(hash), {
      offsetTop: -scrollbar.containerEl.scrollTop
    });
  };

  onInit() {
    this.jumpToHash(window.location.hash);

    window.addEventListener('hashchange', this.onHashChange);

    this.scrollbar.contentEl.addEventListener('click', this.onClick);
  }

  onDestory() {
    window.removeEventListener('hashchange', this.onHashChange);

    this.scrollbar.contentEl.removeEventListener('click', this.onClick);
  }
}

// usage
Scrollbar.use(AnchorPlugin);

mrWilson · Answer 5 · Sat Jan 29 2022 19:43:27 GMT+0800 (China Standard Time)

Still no luck. :( Please see my CodePen: https://codepen.io/mrWilson123/pen/podjEPP

Daofeng Wu · Answer 6 · Sat Jan 29 2022 19:46:03 GMT+0800 (China Standard Time)

You need to load plugins before initializing the scrollbar:

Scrollbar.use(AnchorPlugin);

Scrollbar.init(...);

mrWilson · Answer 7 · Sat Jan 29 2022 19:57:35 GMT+0800 (China Standard Time)

Works, but not with Firefox. :(

Demo: https://cdpn.io/pen/debug/yLPYavz?authentication_hash=GnMnbXQxopGM#active
Code: https://codepen.io/mrWilson123/pen/yLPYavz

Daofeng Wu · Answer 8 · Sat Jan 29 2022 20:02:59 GMT+0800 (China Standard Time)

It just works as expected in my environment (macOS 12.2, Firefox 96.0.3).

recording.mov

Daofeng Wu · Answer 9 · Sat Jan 29 2022 20:10:08 GMT+0800 (China Standard Time)

If it still doesn't work in your environment, you can try resetting the container.scrollTop:

  jumpToHash = (hash) => {
    const { scrollbar } = this;

    if (!hash) {
      return;
    }

    scrollbar.scrollIntoView(document.querySelector(hash), {
      offsetTop: -scrollbar.containerEl.scrollTop
    });

+   scrollbar.containerEl.scrollTop = 0;
  };

mrWilson · Answer 10 · Sat Jan 29 2022 21:41:59 GMT+0800 (China Standard Time)

Strange that it didn't work for me. Firefox 96.0.3

But scrollbar.containerEl.scrollTop = 0; did the trick. Thank you very much. :)

But is it possible to add offset to it?

Daofeng Wu · Answer 11 · Sat Jan 29 2022 22:37:33 GMT+0800 (China Standard Time)

But scrollbar.containerEl.scrollTop = 0; did the trick.

Then I think resetting scrollTop before we call scrollbar.scrollIntoView() will work too. Can you test the following code in your environment?

  jumpToHash = (hash) => {
    if (!hash) {
      return;
    }

   const { scrollbar } = this;

    // reset scrollTop
    scrollbar.containerEl.scrollTop = 0;

    scrollbar.scrollIntoView(document.querySelector(hash));
  };

But is it possible to add offset to it?

Just use the offsetTop option:

scrollbar.scrollIntoView(document.querySelector(hash), {
  offsetTop: 1024
});

mrWilson · Answer 12 · Sun Jan 30 2022 00:53:12 GMT+0800 (China Standard Time)

Yes, it works now. :)

To make it even better, could we add an offset through the data attributes? I mean something like this:

<nav class="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="#section-1" data-offset="80">Section 1</a></li>
    <li><a href="#section-2" data-offset="100">Section 2</a></li>
    <li><a href="#section-3" data-offset="150">Section 3</a></li>
    <li><a href="#section-4" data-offset="200">Section 4</a></li>
    <li><a href="#section-5" data-offset="250">Section 5</a></li>
  </ul>
</nav>

There may be situations where different offsets need to be used.

Code: https://codepen.io/mrWilson123/pen/LYOpbRE

Daofeng Wu · Answer 13 · Sun Jan 30 2022 15:04:04 GMT+0800 (China Standard Time)

Simply change the code to:

  jumpToHash = (hash) => {
    if (!hash) {
      return;
    }

   const { scrollbar } = this;

    // reset scrollTop
    scrollbar.containerEl.scrollTop = 0;

    const target = document.querySelector(hash);

    if (target) {
      scrollbar.scrollIntoView(target, {
        offsetTop: parseFloat(target.getAttribute('data-offset')) || 0,
      });
    }
  };

mrWilson · Answer 14 · Sun Jan 30 2022 21:11:25 GMT+0800 (China Standard Time)

Almost perfect. :)

One more thing. But what if the data attributes are not defined and we want to set the default offset?

Daofeng Wu · Answer 15 · Sun Jan 30 2022 21:29:10 GMT+0800 (China Standard Time)

But what if the data attributes are not defined and we want to set the default offset?

Change 0 to whatever you want.

I am going to close this issue as your questions have gone far beyond this project. If you want to learn the fundamentals of front-end web development, just google them.

mrWilson · Answer 16 · Sun Jan 30 2022 21:51:09 GMT+0800 (China Standard Time)

Thank you very much for your time. I think this is an awesome plugin. :)

Here is a working code sample in case someone else needs it: https://codepen.io/mrWilson123/pen/OJOyaGG

Demo: https://cdpn.io/pen/debug/OJOyaGG?authentication_hash=dGrXWjvQdvBM