移動端網頁大小固定區域滾動/overflow:auto移動端不顯示滾動條
阿新 • • 發佈:2019-02-07
移動端網頁,要實現功能,如圖片
初步想法,使用dl 給dl設定固定寬高 然後用overflow:auto設定滾動顯示完整內容
碰到問題1:滾動條不顯示,但是可以正常滾動,
解決辦法
碰到問題2:此種方法實現的功能滑動到塊底部時,整個頁面均向上滑動<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>
解決辦法:使用iscroll外掛滾動
html程式碼
css程式碼<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>
<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>
完美解決!