NO BUG: Offcanvas: no scroll (body) and browser scrollbar

Bugs
1

Browser: Chrome 114
OS: Windows
URL: Try Bricks – t7b3ff1b

If we activate the No scroll (body) option in the Offcanvas widget, in the front end, when Offcanvas is opened, the scroll bar of the browser will be hidden immediately. The same issue causes the content of the page to shake, which creates an unpleasant feeling.
There was a similar problem with the pop-up before, which was fixed in an update.

2

Hi Hosein,
Thanks so much for your report!

I don’t see/feel a difference between the popup no scroll and the offcanvas no scroll. Can you provide a link to the report or changelog entry?

From the gut, I don’t know how you could change the behavior. Do you have (any) example page where this is solved the way you want it?

Best regards,
timmse

3

Hi again @timmse,

Similar item link for popup.

4

Can you try the following custom CSS and see if it resolves the offcanvas jump for you?

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}
5

Yes, problem solved. Thankful

6

@timmse
But in fact, this code causes the No scroll (body) option in the Offcanvas widget to fail.

7

That’s right. If the scrollbar is there, it is scrollable. As I said, I don’t see a perfect solution to this. If you find anything on the net, please let me know :pray:

2 Likes
8

I hope I’m not resurrecting a forum zombie but I do not see a year to that thread either. So obviously I came to the same issue BUT since I migrate an Elementor site that uses CartPops (great cart and hopefully Bricks picks up this features) I know this issue is possible to resolve with A. not showing the scrollbar and B. not have the hole website layout jump side to side.
I can see it is working on that elementor site so there is a solution. I just not have found out which. On a first look it seem there is also a “padding-right:17px” added to the overflow:hidden; tag. If anyone has a solution out there I’m thankfully for input.

//Edit: Seems this does the trick. No jump and no scroll. But I need to test it everywhere…

body.no-scroll { overflow: hidden; padding-right: 17px; }

//Edit-2: Well, nothing easy… Offcanvas module works with that fix but now the same jumping happens for the Nav element mobile menu. The new padding fix is the issue. And this for the mobile breakpoint only which makes sense now. So either have the website jumping around with that Offcanvas or the nav menu… So this is a fix for an Offcanvas custom side cart and full screen mobile menu (which is essentially another Offcanvas side element)

body.no-scroll {
  overflow: hidden;
  padding-right: 17px;
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 440px) {body.no-scroll {
  padding-right: unset;
}}
1 Like
9

@timmse @HOSEIN
Hey!
There is actually a neat solution for this :slight_smile:

If you apply this to element: scrollbar-gutter: stable; It’ll automatically create gutters to replace the scrollbars, and prevent layout shifts/flickers.

May I also suggest an option to change the scrollbar width, within the Off Canvas menu options? So you can select the width of your scrollbar, as usually for design sake, thiner scrollbars are prefered.

Thanks!

1 Like