doc(styles): Scroll menu and main content separately

[thisisommore]

What does this change

Menu now scroll separately and finitely

video_2021-07-25_20-22-10.mp4

What issue does it fix

Closes #1682

Notes for the reviewer

In desktop the box shadow of <a class="exit-off-canvas"></a> interfaces ui of scroll bar

There are three options to fix this,

• Use custom scroll bar style
• Remove <a class="exit-off-canvas"></a> completly
• Remove box shadow property, possibly this

  porter/docs/themes/porter/assets/sass/foundation/components/_offcanvas.scss

  Line 280 in 0533286

  box-shadow: $off-canvas-overlay-box-shadow;

Due to <a class="exit-off-canvas"></a> in my changes home page doesn't scroll when menu is open.

[thisisommore]

@DARK-art108 @carolynvs would like to discuss this ?

[DARK-art108]

Awesome @thisisommore Looks good to merge!

[DARK-art108]

Looks good to merge!

[DARK-art108]

@thisisommore can you elaborate more on what you have Note for the reviewer as I see the desktop site is working fine after this fix!

[thisisommore]

@thisisommore can you elaborate more on what you have Note for the reviewer as I see the desktop site is working fine after this fix!

@DARK-art108
Sorry if I was being unclear there,
The issue here is minor and is only visible when windows width is small (thats when left hidden menu is available) and can be ignored.
After making menu scrollable it gets it own scrollbar, and that scrollbar gets under the shadow of the element which is in right side.
For reference see this screenshot

and this screenshot after removing the element in side right which was causing shadow,

[carolynvs]

Thanks for fixing this!

I tested the site on a small screen, and can see the problem that you highlighted with scrolling when the menu is open. I tried removing the exist-off-canvas and that seemed to fix it without any side-effects.

Can you remove that element as well?

[thisisommore]

Thanks for fixing this!

I tested the site on a small screen, and can see the problem that you highlighted with scrolling when the menu is open. I tried removing the exist-off-canvas and that seemed to fix it without any side-effects.

Can you remove that element as well?

I can remove that element by tomorrow and thanks for checking this out 😀, between I see that you have self assigned this, did you already removed element ?

[carolynvs]

We use the assignment field on pull requests to help track which maintainer is "managing" a pull request, it doesn't mean that we are taking over an issue or anything. 😀

[thisisommore]

We use the assignment field on pull requests to help track which maintainer is "managing" a pull request, it doesn't mean that we are taking over an issue or anything. 😀

Thanks, got it.

[thisisommore]

I have removed the element from where it was causing issue, I didn't removed it from all html files since I am not aware of issues that might occur by removing the element from every file.

[DARK-art108]

@thisisommore it's working fine now in small screens, now site look more awesome!

[thisisommore]

Just noticed, we are having issues with scroll in side menu.
Reference https://developers.google.com/web/updates/2016/12/url-bar-resizing
I will try to fix this.

[thisisommore]

Now even more stable.
Chrome url bar now won't cause issues.

screen-20210728-182637.mp4

[DARK-art108]

Looks fine to me!

[carolynvs]

This looks great. I really appreciate you contributing some much needed CSS and design skills to our site. 👍

[carolynvs]

Thank you for adding your name to our contributors page! 🎉