Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Scroll sidebar to current active section (#1067) #1068

Closed
wants to merge 3 commits into from

Conversation

lihz6
Copy link
Contributor

@lihz6 lihz6 commented Oct 11, 2019

Sidebar on the left can't auto scroll to the current active section. This is something to do with the book.js.

Edit: I just aware that there already has been a PR #1052 fixing this problem. But I think my PR is a bit cleaner and using the nice Web API. My solution places the active item in the middle of the sidebar whenever possible, which I think it's a bit nicer. 馃槈

Note: This on the top of the sidebar by @morphologue.

@lihz6
Copy link
Contributor Author

lihz6 commented Oct 11, 2019

@morphologue 馃憤 馃憤

@ehuss
Copy link
Contributor

ehuss commented Oct 11, 2019

I like the idea in theory, but scrollIntoViewIfNeeded is not widely supported. In particular it doesn't work on Firefox at all.

Is there some other way to accomplish it without scrollIntoViewIfNeeded?

@lihz6
Copy link
Contributor Author

lihz6 commented Oct 12, 2019

I like the idea in theory, but scrollIntoViewIfNeeded is not widely supported. In particular it doesn't work on Firefox at all.

Is there some other way to accomplish it without scrollIntoViewIfNeeded?

Yes, I love Firefox. scrollIntoView({ block: 'center' }) got much widely supported, Firefox since 58.

Copy link
Contributor

@morphologue morphologue left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea to improve the UI, @ngolin 馃憤 By way of contrast, my change (#1052) was just directed at fixing the existing code. There was already code there to scroll to the top, but it had been broken by a change to the HTML structure.

if (activeSection) {
sidebarScrollBox.scrollTop = activeSection.offsetTop;
}
window.addEventListener('load', function() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary to add an event listener here? This script is loaded at the end of index.hbs after all the HTML for the sidebar, so that's why the existing code was able to directly query for the .active element.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just too careful. Just querying the .active element is not enough, maybe at the end there are some CSS or JS change the width or height of elements dramatically, which would break the scrolling. So I wait until the page totally rendered, that is window loaded.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a good instinct to be careful, however the load event doesn't guarantee that JavaScript has finished manipulating the DOM. It just means that HTML and dependent resources (such as images and stylesheets) have been loaded: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event. Given that there is other code in this file which assumes that the DOM has stabilised, I think this event listener is a bit unnecessary. Of course it's not harmful though either (unless some images take a long time to load).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The addition of this event listener causes significant jumping and flickering on chrome and safari browsers. Would it be possible to remove it?

@trstruth
Copy link

trstruth commented Nov 5, 2019

I'm going through the rust book at the moment and this is driving me nuts! Glad to see a PR has already been submitted and reviewed. Any idea when it'll get merged?

@morphologue
Copy link
Contributor

morphologue commented Nov 5, 2019

I'm going through the rust book at the moment and this is driving me nuts! Glad to see a PR has already been submitted and reviewed. Any idea when it'll get merged?

Hi @trstruth, my PR #1052 was merged on the 6th of October and included in release v0.3.2 The problem is that the public Rust book seems to have been built using an older version. I am temporarily hosting a version of the Rust book with my fix which you might find more convenient for now.

In case you're wondering about the difference between this PR and mine, mine just fixed the existing code (which was trying to make the active selection show at the top of the screen), whereas this PR makes more substantial changes, and the active selection would show in the middle of the screen.

@trstruth
Copy link

trstruth commented Nov 5, 2019

@morphologue thanks for the info, I've opened an issue on the rust book repo describing the situation. Will use your temporary host in the meantime :)

@lihz6
Copy link
Contributor Author

lihz6 commented Nov 6, 2019

@morphologue thanks for the info, I've opened an issue on the rust book repo describing the situation. Will use your temporary host in the meantime :)

I also host all the books here, all compiled from the master.

@avinassh
Copy link

any update on this PR, when this will be merged?

@ehuss
Copy link
Contributor

ehuss commented Feb 13, 2020

@avinassh I'm waiting for the fixes for the addition of the event listener (#1068 (comment)). I've been intending to make the changes myself when I have the time, but I haven't been able to, yet. If someone wants to resubmit the PR with the necessary fixes, that would be great. It would also be useful to fully test this on a wide array of browsers and platforms, and report how well it works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants