jquery.offcanvas inside div [solved]

[jquimera]

This plugin is perfect.

It would be possible to put the off-canvas inside a div, in a boxed layout. Similar to the example I made in the image below?

But I need the native scroll of the body / html, to remain.

Can someone help me? Thank you.

[cheich]

There is no option yet to enable scroll on the main canvas while it's inactive.

You can overwrite the default behavior with this (default is overflow: hidden):

.offcanvas-inactive, .offcanvas-main-inactive {
    overflow: auto;
}

[jquimera]

@cheich Thank you for your attention, I wanted something more or less like this.

https://codepen.io/johnquimera/full/eGqmEo/

This example is with the vmitsaras js-OffCanvas plugin. But I prefer its plugin, since it works perfectly on old browsers, and is lighter. Would it be possible to do the same with your jquery.offcanvas?

Thanks

[cheich]

Can you create the not working example in codepen? I think it needs just some css resets.

[jquimera]

@cheich Here: https://codepen.io/johnquimera/full/XzeMdJ/

This is very good, I just do not want this scroll in the div. But in body / html.

[cheich]

This should fix it:

#page {
  overflow: visible;
  position: relative;
}

This overwrites CSS that is only required in 'base' mode.

However, in the example, .main-content has a fixed height of 1024px;. That means everything will be cut down even if the content is bigger. Get rid of that or set it to min-height: 1024px;.

Here is your updated snippet: https://codepen.io/cheich/pen/XzeRdg

[jquimera]

@cheich This is perfect and very useful. Thanks.