Menu icon Foundation
How to Remove Off-Canvas Vertical Scroll-bar?

How do you remove the off-canvas scroll bar.  I have a left off-canvas menu which is on-canvas on large screens. It has a scroll bar when the menu is longer than the content on the main page. I would prefer the length of the page be whatever is needed to fit the off-canvas menu and that using the vertical scroll-bar on the far right of the browser window be the one used to scroll up and down the entire page. 

The docs here, suggest this is possible:

 

The menu will be fixed-position by default, meaning it follows you as you scroll up and down. The menu also gets its own scroll bar if it's taller than the window. To disable these features, set the $offcanvas-fixed-reveal variable to false.

OK, so that begs the question, how do I set an $offcanvas-fixed-reveal variable to false?  I tried adding the following to the off-canvas div and that didn't work:

offcanvas-fixed-reveal="false"

Thanks for your help.

...Dale

 

 

removeoff-canvasverticalscroll-barscrollbar

How do you remove the off-canvas scroll bar.  I have a left off-canvas menu which is on-canvas on large screens. It has a scroll bar when the menu is longer than the content on the main page. I would prefer the length of the page be whatever is needed to fit the off-canvas menu and that using the vertical scroll-bar on the far right of the browser window be the one used to scroll up and down the entire page. 

The docs here, suggest this is possible:

 

The menu will be fixed-position by default, meaning it follows you as you scroll up and down. The menu also gets its own scroll bar if it's taller than the window. To disable these features, set the $offcanvas-fixed-reveal variable to false.

OK, so that begs the question, how do I set an $offcanvas-fixed-reveal variable to false?  I tried adding the following to the off-canvas div and that didn't work:

offcanvas-fixed-reveal="false"

Thanks for your help.

...Dale

 

 

Rafi Benkual over 2 years ago

The scrollbar is set by overflow: scroll; If you change to overflow: hidden (no scroll) or auto (scrolling) that would hide the scrollbar.

Dale Dietrich over 2 years ago

OK, Rafi that got me part-way there.

 

The scoll-bar is gone, but the off-canvas menu is not part of the main page in that when the content of the main section of my page (to the right of the off-canvas-menu which is really on canvas on large screens) is shorter than the off-canvas menu there is no scroll bar on the far right of my page to scroll down.

What I want is for the right scroll bar on the right side of a browser page to scroll the WHOLE page down BOTH when the main content goes beyond the standard browser page or when the off-canvas menu on the left does.  So, for example here is a photo of my test page.  You can see the main content on the right (just filler content on the test page) is far far shorter than the off-canvas 'Friends' menu on the left which runs off the page. In this context I still want just one scroll bar on the far right for the whole page.