For example:
HTML code:
<!doctype html>
<meta charset= "UTF-8"/>
<title>Document</title>
<meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, User-scalable=no "/>
<link rel= "stylesheet" type= "Text/css" href= "Css/mui.css"/>
<body>
<!--main interface fixed, menu moved--
<!--slide navigation root container--
<div class= "Mui-off-canvas-wrap mui-draggable mui-slide-in" >
<!--menu Container--
<aside class= "Mui-off-canvas-left" id= "Offcanvasside" >
<div class= "Mui-scroll-wrapper" >
<div class= "Mui-scroll" >
<!--Menu specific Content--
</div>
</div>
</aside>
<!--home Face--
<div class= "Mui-inner-wrap" >
<!--Main Page title---
<a class= "Mui-icon mui-action-menu mui-icon-bars mui-pull-left" href= "#offCanvasSide" ></a>
<H1 class= "Mui-title" > title <nav class= "Mui-bar mui-bar-tab" >
<a class= "Mui-tab-item mui-active" >
<span class= "Mui-icon mui-icon-home" ></span>
<span class= "Mui-tab-label" > Home </span>
</a>
<a class= "Mui-tab-item" >
<span class= "Mui-icon mui-icon-phone" ></span>
<span class= "Mui-tab-label" > Phone </span>
</a>
<a class= "Mui-tab-item" >
<span class= "Mui-icon mui-icon-email" ></span>
<span class= "Mui-tab-label" > Mail </span>
</a>
<a class= "Mui-tab-item" >
<span class= "Mui-icon mui-icon-gear" ></span>
<span class= "Mui-tab-label" > Settings </span>
</a>
</nav>
<div class= "Mui-content mui-scroll-wrapper" >
<div class= "Mui-scroll" >
<!--the main interface to display content--
<div id= "Slider" class= "Mui-slider" >
<div class= "Mui-slider-group mui-slider-loop" >
<!--an additional node (circular carousel: The first node is the last carousel)--
<div class= "Mui-slider-item mui-slider-item-duplicate" >
<a href= "#" >
</a>
</div>
<!--the first one--
<div class= "Mui-slider-item" >
<a href= "#" >
</a>
</div>
<!--second--
<div class= "Mui-slider-item" >
<a href= "#" >
</a>
</div>
<!--third--
<div class= "Mui-slider-item" >
<a href= "#" >
</a>
</div>
<!--fourth one--
<div class= "Mui-slider-item" >
<a href= "#" >
</a>
</div>
<!--an additional node (circular carousel: The last node is the first carousel)--
<div class= "Mui-slider-item mui-slider-item-duplicate" >
<a href= "#" >
</a>
</div>
</div>
<div class= "Mui-slider-indicator" >
<div class= "Mui-indicator mui-active" ></div>
<div class= "Mui-indicator" ></div>
<div class= "Mui-indicator" ></div>
<div class= "Mui-indicator" ></div>
</div>
</div>
<ul class= "Mui-table-view mui-grid-view mui-grid-9" >
<li class= "Mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" >
<a href= "#" >
<span class= "Mui-icon mui-icon-home" ></span>
<div class= "Mui-media-body" >Home</div>
</a>
</li>
<li class= "Mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" >
<a href= "#" >
<span class= "Mui-icon mui-icon-email" ><span class= "Mui-badge mui-badge-red" >5</span></span >
<div class= "Mui-media-body" >Email</div>
</a>
</li>
<li class= "Mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" >
<a href= "#" >
<span class= "Mui-icon mui-icon-chatbubble" ></span>
<div class= "Mui-media-body" >Chat</div>
</a>
</li>
<li class= "Mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" >
<a href= "#" >
<span class= "Mui-icon mui-icon-location" ></span>
<div class= "Mui-media-body" >Location</div>
</a>
</li>
<li class= "Mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" >
<a href= "#" >
<span class= "Mui-icon mui-icon-search" ></span>
<div class= "Mui-media-body" >Search</div>
</a>
</li>
<li class= "Mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" >
<a href= "#" >
<span class= "Mui-icon mui-icon-phone" ></span>
<div class= "Mui-media-body" >Phone</div>
</a>
</li>
</ul>
<ul class= "Mui-table-view" >
<li class= "Mui-table-view-cell Mui-media" >
<a href= "javascript:;" >
<div class= "Mui-media-body" >
Happiness
<p class= "Mui-ellipsis" > It's a happy thing to sleep with someone you love, but what about snoring? </p>
</div>
</a>
</li>
<li class= "Mui-table-view-cell Mui-media" >
<a href= "javascript:;" >
<div class= "Mui-media-body" >
Huts
<p class= "Mui-ellipsis" > Want such a chalet, summer ice-eating melon, winter heating .</p>
</div>
</a>
</li>
<li class= "Mui-table-view-cell Mui-media" >
<a href= "javascript:;" >
<div class= "Mui-media-body" >
Cbd
<p class= "mui-ellipsis" > Oven mode of the city, to dusk, like an overturned palette general .</p>
</div>
</a>
</li>
</ul>
<ul class= "Mui-table-view" >
<li class= "Mui-table-view-cell Mui-media" >
<a href= "javascript:;" >
<div class= "Mui-media-body" >
Happiness
<p class= "Mui-ellipsis" > It's a happy thing to sleep with someone you love, but what about snoring? </p>
</div>
</a>
</li>
<li class= "Mui-table-view-cell Mui-media" >
<a href= "javascript:;" >
<div class= "Mui-media-body" >
Huts
<p class= "Mui-ellipsis" > Want such a chalet, summer ice-eating melon, winter heating .</p>
</div>
</a>
</li>
<li class= "Mui-table-view-cell Mui-media" >
<a href= "javascript:;" >
<div class= "Mui-media-body" >
Cbd
<p class= "mui-ellipsis" > Oven mode of the city, to dusk, like an overturned palette general .</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class= "Mui-off-canvas-backdrop" ></div>
</div>
</div>
<script type= "Text/javascript" >
Mui.init ();
<!--here Add the following JS code--
</script>
<script src= "Js/mui.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script type= "Text/javascript" >
</script>
</body>
The page Overflow section does not appear because the page is not initialized, and the following code is required to resolve the issue:
JS Code:
(function ($) {
$ (". Mui-scroll-wrapper"). Scroll ({
bounce:false,//whether the scroll bar has elastic default is True
Indicators:false,//Whether the scroll bar is displayed, the default is True
});
}) (MUI);
Hbuilder Development MUI Web App overflow page up and down no scrolling problem