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('#scr1').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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Some friends are not used to the floating window function of win11 input method, and it always feels strange to use, so they want to turn off this floating window function. Now I will introduce to you the correct operation method of closing the floating window in win11 system. Follow along. Win11 hides the input method floating window 1. Open the settings key of the computer, and then select "Time and Language". After entering, click "Enter" 2. Find "Switch Input Method" in "Advanced Keyboard Settings", and then change "Desktop Language" Click the check mark in front of "Bar", and then enter "Language Bar Options" 3. After opening, we click "Hide" here to close the language floating window.

In the win11 system, if we find the icons in the taskbar troublesome, we can choose to hide them in the taskbar corner overflow interface. However, the icons in the taskbar of the application opened below cannot be hidden. Let’s follow the editor below. Let’s look at the specific situation. How to hide the win11 taskbar icon: 1. Center the icon 1. First, if we want to hide the icon in the taskbar below, we can right-click to select it and click "Unpin from taskbar" 2. But if we open this application and are in the process Use it and that's impossible to hide. 2. Icon in the lower right corner 1. If you want to hide the application icon in the lower right corner, first open the system settings. 2. Then click "Personalization" on the left sidebar, as shown in the picture. 3. Then click to enter the taskbar on the right

How to hide WeChat friends without blocking or deleting them? Many users want to hide some friends but don’t know how to do it. Let this site carefully introduce to users how to hide WeChat friends without blocking or deleting them. Methods to hide WeChat friends without blocking or deleting Method 1: 1. First open the WeChat software, find the address book on the WeChat page, and click "My". 2. Then we enter the settings page. 3. Find the “Privacy” option and click on it. 4. Then click "Don't let him see". 5. Go to the Do Not Let Her View page and click "+" to check the friends you want to hide.

There are many short video works provided in the Douyin short video app software. You can watch them as you like, and they are all permanently provided free of charge. Different types of live video channels are open, and all video content is original, with Give everyone the most satisfying way to watch. Enter your account to log in online, and a variety of exciting short videos will be pushed, which are accurately recommended based on what everyone watches every day. You can also enter the live broadcast room to interact and chat with the anchor, making you feel more happy. Works uploaded by individuals can also be hidden. It is very simple to set up with one click. You can see wherever you swipe. Swipe up and down to see the real-time comments of countless netizens. You can also share daily life dynamics. Now the editor has detailed online Douyin short videos. Users push for ways to hide personal video works. First open Douyin short video

In addition to the amazing hardware configuration and excellent functions, Xiaomi Mi 14 also hides a fascinating place - Smart Island. Here, users can enjoy personalized customization and unlimited creative mobile phone experience. But not everyone likes this feature, so how does Xiaomi Mi 14 hide Smart Island? Let’s find out together. How to hide Smart Island on Xiaomi Mi 14? 1. Open the settings application of Xiaomi 14 mobile phone. 2. Scroll to find the "Features" option and click to enter. 3. Find the "Hide Smart Island" option on the features page and turn it on. 4. After confirming that hiding the Smart Island is turned on, return to the desktop and you will see that the Smart Island has been hidden.

1. First click [+] to shoot. 2. Then click the check mark in the lower right corner to confirm the completion of shooting. Click] Next[, 3. Click [Who can see]. Just select [Private]. Scenario 2: The work has been taken. 1. Click [Me] and select [Work]. 2. Click the [three dots] logo on the right. 3. Swipe left to find [Permission Settings], 4. Click [Set as Private].

You can hide some games you don’t want to see in steam, so where are the hidden games? Players can click on the hidden game in the view to find their hidden game content. This introduction to the location of hidden games on Steam will tell you the specific method. The following is a detailed introduction, come and take a look! "Steam Usage Tutorial" Where are the hidden games in Steam? Answer: Click on the hidden game in the view. Specific methods: 1. First, click on the view in the software and click on the hidden game. 2. After clicking, you can see the hidden games in the menu on the left. How to hide games: 1. First click on your game library. 2. Select a game, right-click and select Manage. 3. Choose to hide this game.

Mobile phones have become an indispensable part of our daily lives, with the continuous advancement of technology and the popularity of smartphones. These junk files take up valuable storage space, and over time, a large amount of hidden junk will accumulate in the phone and cause the performance of the phone to degrade, however. Knowing how to deeply clean hidden junk on your phone has become essential knowledge for every mobile phone user. 1. Find and clear useless application caches 2. Delete applications that are no longer used 3. Clean photo and video cache 4. Thoroughly clean temporary files and download folders 5. Organize and clean contact and text message records 6. Clean system cache 7. Uninstall useless system applications 8. Clean browser cache and history 9. Delete invalid music and audio files 10. Optimize mobile phone file system
