Problem with off-canvas sliding beyond part in mui framework

Below I will share with you an article that perfectly solves the problem of the mui frame off-canvas slipping beyond the partially hidden part and being unable to scroll. It has a good reference value and I hope it will be helpful to everyone.

One of the disadvantages of off-canvas side sliding in the mui framework is that the scroll bar cannot appear, because its main purpose is to set a pattern similar to the QQ interface, so it cannot scroll. So how to solve this problem?

Solution:

1. Add the id to the content container, and then control it through JS

<p class="mui-content mui-scroll-wrapper" id="scr1">

JS part

<script>
mui(&#39;#scr1&#39;).scroll();
</script>

2. Use the method of creating sub-pages:

mui.init({
subpages:[{
url:'index.html',   //要引入的页面
id:'index.html' , //要引入页面的标志
style:{
top:'50px',   //页面顶部的位置
bottom:'0px'
}
extrax{}    //额外扩展参数
}]
});

You can write content in the index.html page, and a scroll bar will appear

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Basic internal method diagram of Object in JavaScript (graphic tutorial)

Use axios to encapsulate the fetch method and call

What are the differences between Map and ForEach in JS?

How to implement the page loading progress bar component in vue

How to use javascript to obtain different prices every day within the date range

How to implement the image loading component in vue

Why will Node.js become a web application development?

How to implement the exchange method of two variable values ​​in JS

How to implement the event-responsive progress bar component in Vue

How to use Dom elements in jQuery?

The above is the detailed content of Problem with off-canvas sliding beyond part in mui framework. For more information, please follow other related articles on the PHP Chinese website!