Mobile page size fixed area scrolling/overflow:auto scroll bar not displayed on mobile side

Mobile Web page, to realize the function, the piece

Initial idea, use DL to set a fixed width to DL and then scroll through the full content with Overflow:auto settings

Problem 1: Scroll bar does not display, but can scroll normally,

Solutions

<span style= "Font-family:microsoft yahei;font-size:18px;color: #333333;" >/*--scroll bar--*/::-webkit-scrollbar{width:5px; height:5px background-color: #fff;}::-webkit-scrollbar:hover{ Background-color: #eee; }::-webkit-resizer{}::-webkit-scrollbar-thumb{-webkit-border-radius:4px; Background-color: #ccc; height:10px;}::- webkit-scrollbar-thumb:hover{background-color: #aaa;}::-webkit-scrollbar-thumb:active{background-color: #888;} </span>

Problem 2: When the function of this method is sliding to the bottom of the block, the entire page is sliding upward

Workaround: Use the Iscroll plugin to scroll

HTML code

<span style= "Font-family:microsoft yahei;font-size:18px;color: #333333;" ><div class= "wrapper" ><dl id= "scroller" ><dt> all business district </dt><dd> business district 1</DD><DD > 1</dd><dd> Commercial Zone, 1</dd><dd> commercial district, 1</dd><dd> District, 1</dd><dd> commercial area 1</DD 1</dd><dd>, 1</dd><dd> business district, 1</dd><dd> Commercial district, 1</dd><dd> commercial area, ><dd> business district Commercial Area 1</dd><dd> Commercial district 1</dd><dd> 1</dd><dd> Shang District 1</dd><dd> Shang District 1</dd> 1</dd></dl></div></span>, 1</dd><dd> Commercial District, 1</dd><dd> commercial area, <dd> business district

CSS Code

<span style= "Font-family:microsoft yahei;font-size:18px;color: #333333;" >.wrapper{position:relative; left:0; top:40px; width:40%; height:150px; overflow:hidden;}. Wrapper dl{Position:absolute;} </span>

JS Code

<span style= "Font-family:microsoft yahei;font-size:18px;color: #333333;" ><script type= "Text/javascript" src= "js/iscroll.js" ></script><script type= "Text/javascript" > var myscroll;function loaded () {myscroll = new Iscroll ('. Wrapper ', {scrolly:true, scrollbars:true});} Document.addeventlistener (' Touchmove ', function (e) {E.preventdefault ();}, False);</script></span>

Perfect solution!

Mobile page size fixed area scrolling/overflow:auto scroll bar not displayed on mobile side