移動端網頁大小固定地區滾動/overflow:auto移動端不顯示捲軸

標籤：

移動端網頁，要實現功能，片

初步想法，使用dl 給dl設定固定寬高 然後用overflow：auto設定滾動顯示完整內容

碰到問題1：捲軸不顯示，但是可以正常滾動，

解決辦法

<span style="font-family:Microsoft YaHei;font-size:18px;color:#333333;">/*--捲軸--*/::-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>

碰到問題2：此種方法實現的功能滑動到塊底部時，整個頁面均向上滑動

解決辦法：使用iscroll外掛程式滾動

html代碼

<span style="font-family:Microsoft YaHei;font-size:18px;color:#333333;"><div class="wrapper"><dl id="scroller"><dt>全部商區</dt><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd><dd>商區1</dd></dl></div></span>

css代碼

<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代碼

<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>

完美解決！

 

移動端網頁大小固定地區滾動/overflow:auto移動端不顯示捲軸