Hi all!

I have a screen that already has a vertical scrollbar, and when the sidebar opens it gets a second vertical scrollbar. 

The behaviour i would expect is that the page's vertical scrollbar would be replaced by the new one as the overlay is also used. 

Is there a solution out of the box for this? Did someone tackle this issue before and has ideas/suggestions?

Thanks!

gbarbosa wrote:

Hi all!

I have a screen that already has a vertical scrollbar, and when the sidebar opens it gets a second vertical scrollbar. 

The behaviour i would expect is that the page's vertical scrollbar would be replaced by the new one as the overlay is also used. 

Is there a solution out of the box for this? Did someone tackle this issue before and has ideas/suggestions?

Thanks!

Hi gbarbosa,

     Can you share your output screen or published link.


Solution

Hi, 

Thanks for asking but unfortunately i could not share it. But you can replicate it easily, just add a sidebar with enough content so that it triggers the vertical scroll in a screen with enough content to have its own vertical scrollbar also and you will see the 2 vertical scrollbars

But I found the solution eitherway: 

On toggle of the sidebar/click overlay screen actions, add a RunJavaScript (from HttpRequestHandler extension) with: 

SyntaxEditor Code Snippet

"   $(""body"").toggleClass(""myClass"");"

and to your theme:

SyntaxEditor Code Snippet

.myClass {    
    margin: 0;
    height: 100%;
    overflow: hidden; }


This will disable the screen vertical scrollbar while the sidebar is open.



Solution

gbarbosa wrote:

Hi, 

Thanks for asking but unfortunately i could not share it. But you can replicate it easily, just add a sidebar with enough content so that it triggers the vertical scroll in a screen with enough content to have its own vertical scrollbar also and you will see the 2 vertical scrollbars

But I found the solution eitherway: 

On toggle of the sidebar/click overlay screen actions, add a RunJavaScript (from HttpRequestHandler extension) with: 

SyntaxEditor Code Snippet

"   $(""body"").toggleClass(""myClass"");"

and to your theme:

SyntaxEditor Code Snippet

.myClass {    
    margin: 0;
    height: 100%;
    overflow: hidden; }


This will disable the screen vertical scrollbar while the sidebar is open.




That's fine gbarbosa, but I just want to know why you made overflow: hidden for body element in some cases any other elements come below the content area then you can't scroll again you facing a similar issue. also there is no need for js, why you add toggleClass.