30-seconds-of-code: [BUG] Navigation by menu

[AlekseyPn]

Expected

When I click to the menu item, I expected that I scroll to into selected item in the section.

Current

When I click by the item I go to in the section of the item. I will need one more time open menu, find needed item, and select him or scroll manually to him

Is it bug or feature? :)

Sorry if I made a mistake, I do not speak English well

[Chalarangelo]

It's a bug that only appears in Chrome, we are already aware of it and trying to figure out how to fix it.

[fejes713]

@Chalarangelo any plans on how're we going to fix this? I experienced the same bug on Firefox Dev edition today.

When I search for eg. truncate and select it, it does scroll to it but scrolls like 300px down as well so the title and half of the snippet card are not shown.

[Chalarangelo]

The scroll discrepancy is standard on many browsers and websites. This can be fixed with some HTML trickery, not that big of an issue. The non-scrolling issue when switching pages is a bit of a pain, but I am planning to rebuild the web script from the ground up soon, so we have a better reference point for issues like this.

[skatcat31]

We could add a scroller script that checks for an anchor and then scrolls to the anchor after rendering(it could easily be delayed and still loaded in head)

[Chalarangelo]

@skatcat31 Unfortunately, our old scroller didn't work last time I checked. Probably a CSS grid bug or somesuch...

[skatcat31]

... I thought the scroller was just removed when the site was changed... I'll have to re-look at the PR. We may just want to delay it's execution then until after all other scripts(defer attribute on external scripts or IIFE in a setTimeout) if the issue is the scroll happens before the page renders

[Chalarangelo]

@skatcat31 I would love to spend some time picking at this, but I don't think I'll be able to work this bug for a few days. If you want to try fixing it or doing anything with it, please report back with any news! 😉

[skatcat31]

I'm in the same boat for quite some time sadly XD

[rsarky]

Would love to get onboard and help with this.
I faced the scroll discrepancy issue same as @fejes713 but wasn't able to recreate the issue where the
scroll doesn't happen.

[zainafzal88]

Being a novice to open source contribution and taking this issue as my first step, trying to run it on VS Code, however, unable to. It says I can't run it because "anugular.json could not be found". I have folked the project and seeing the issue "Integration with VS Code", i am assuming that it's not compatible with VS Code(correct me if i am wrong). How did you run it?

[skatcat31]

@zainafzal88 can you provide some clarification? Tried to run with VS Code?

[zainafzal88]

Sure. I cloned the repo, opened it in VS Code and tried to run it using “ng serve” via terminal

On 6 Oct 2018, at 12:38, Robert Mennell <[email protected][e-mail]> wrote:

@zainafzal88https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fzainafzal88&data=02%7C01%7C%7Cda322944cd48468136a508d62b34c1c9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636743902913459631&sdata=FHpn4nsaSEGELO5%2FjdtgoZUPwkktX7dInJR%2F9Yqhyb0%3D&reserved=0 can you provide some clarification? Tried to run with VS Code?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2F30-seconds%2F30-seconds-of-code%2Fissues%2F745%23issuecomment-427539668&data=02%7C01%7C%7Cda322944cd48468136a508d62b34c1c9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636743902913459631&sdata=%2BhQmpPp1ejgIfF%2BYSNz5I%2BtrvOUUoU9O4QY2AQl8JeE%3D&reserved=0, or mute the threadhttps://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAH12VpmjzzkwVCXqeotsEiIrvc-TeYejks5uiBeRgaJpZM4WwFZD&data=02%7C01%7C%7Cda322944cd48468136a508d62b34c1c9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636743902913459631&sdata=vI8J3rKF9rQJY0Ft0vNk4f%2BQu6BfyIXTrq8LBPFUCCw%3D&reserved=0.

[Chalarangelo]

I'd suggest running the pages from Chrome Simple Webserver instead.

[zainafzal88]

@Chalarangelo thank you. I have installed that. Just curious, why doesn't the project run with VS Code? Also, there are many files and I don't know which was has the actual file that needs working on. Can someone please tell me as it's not mentioned in the reproduction steps

[Chalarangelo]

The issue is a mix of CSS (compiled from SCSS), HTML and browser support. The generated files are all in the docs folder, the script generating them is web.js and the parts used are style.scss and the .html static parts in the static-parts folder. My best guess is we have some unmatching HTML tags somewhere or that CSS Grid doesn't quite work the way we expected it to in different browsers or when navigating to another page.

The old JS solution breaks down in the latest website redesign, so we dropped it for a native scroll approach, but it didn't quite cut it.

[zainafzal88]

@Chalarangelo thanks for all the explanation. Got few family plans today. I’ll work on it from tomorrow

[JIAKUNTIAN]

interesting

[Chalarangelo]

@zainafzal88 Have you tried anything yet? It's been a while and this is quite a big issue, especially now that Edge is moving to V8 and will most likely have this very same issue in the future.

[verget]

@Chalarangelo I think I can try to catch this fallen flag =) Anchor scroll functional looks working, but I see the issue @fejes713 mentioned when the title of a section overlaps by a fixed header. Is PR welcome?

[Chalarangelo]

@verget PR is definitely very very welcome, this seems like an issue that should be fixed asap! 😉

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.