Mobile Terminal webpage size fixed area scroll/overflow: auto mobile terminal does not display scroll bar, overflowauto

Mobile Terminal webpage size fixed area scroll/overflow: auto mobile terminal does not display scroll bar, overflowauto

For mobile Web pages, to implement functions

Preliminary Idea: Use dl to set fixed width and height for dl and then use overflow: auto to scroll to display the complete content

Problem 1: the scroll bar is not displayed, but it can be rolled normally,

Solution

<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 implemented by this method slides to the bottom of the block, the whole page slides up.

Solution: Use the iscroll plug-in to scroll

Html code

<Span style = "font-family: Microsoft YaHei; font-size: 18px; color: #333333; "> <div class =" wrapper "> <dl id =" scroller "> <dt> all business districts </dt> <dd> Business District 1 </dd> <dd> business district 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd>/ dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> <dd> commercial area 1 </dd> </dl> </div> </span>

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!