With the use of the native scrollintoview method, the browser scroll to the heading in sort that the top of heading element match the top of the browser window.
We don't have (anymore) a setting wich allows us to configure an offset, allowing to scroll to the element but with an offset in px. This is particularly useful if you have a sticky bar navigation, and allow us to configure the height of this bar navigation as an offset for the scroll. So the browser will scroll to the heading until it will be just under the bar navigation sticked, and not behind.
Add a new setting "scroll offset", a value in px. If this value is set then we add the following CSS rules to the html element :
scroll-padding-top: VALUE px;
There is a lack of support for an offset for the native scrollintoview method, but we can use this property to adjust the scrolling behavior
See https://stackoverflow.com/questions/24665602/scrollintoview-scrolls-just...
Agreed on solution and write patch
New setting added. Default empty.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | toc_js-scroll_heading-classes-config.jpg | 40.07 KB | mably |
| #4 | toc_js-scroll_offset-config.jpg | 34.63 KB | mably |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
mably commentedCould be an interesting feature to have.
Will think about it.
Comment #4
mably commentedA new "Scroll offset" configuration option has been added:
It adds a custom
scroll-top-marginCSS configuration to each heading.You can also specify a list of CSS classes to apply to every page heading and add the
scroll-top-marginCSS property to one of those classes in your site theme CSS files:@flocondetoile could you give it a try and tell me what you think of it?
This MR contains also a few fixes for bugs found while implementing this new feature.
Comment #5
mably commentedComment #6
flocondetoileLooks good and works fine.
I guess you choose to apply a scroll-margin-top to each heading of the TOC, instead of a global scroll-padding-top to the html element (and so simpler), because it's let us more control to vary (if needed) this behavior per heading (via theme or other magic css) ?
Comment #7
mably commentedYep, and I think that adding a scroll-padding-top on the HTML element should rather be done in the site theme than in a module.
In our case, I think that the better solution is to add a custom class that will apply the scroll margin to the page headings.
Comment #8
mably commented