materializecss / materialize

Materialize, a web framework based on Material Design
https://materializeweb.com/
MIT License
920 stars 105 forks source link

Flag for the ScrollSpy component that ensures the last active element remains visible #500

Open IvanPostu opened 3 months ago

IvanPostu commented 3 months ago

Before submitting...

Context

If the user scrolls the page outside of the scrollspy elements, there will be no active element in the section table-of-contents. In most cases, this is fine. However, if it's necessary to keep the last active element visible in the section table-of-contents, the component doesn't provide a way to do so.

Current Behavior

Let's imagine a blog web page with 2 sections:

Main section is wrapped in scrollspy component. When the user scrolls down from the main section through comments, there will be no active element in section table-of-contents.

Expected behavior

To introduce a flag keepLastActiveElementVisible (or any other name, TBD) that allows keeping the element visible inside section table-of-contents if scrollbar is outside the scrollspy elements.

Possible Solutions or Causes

To introduce that flag, if the proposal is approved then I can implement it!

Your Environment

IvanPostu commented 3 months ago

cc @OlivierMadant @wuda-io

I know how to implement this. If you agree with the idea, I will start working on it.

wuda-io commented 3 months ago

Thats a good idea! What is with the starting element? Maybe we should also add keepFirstElementActive too. From my side this is ok 👍