首页 > 代码库 > 移动端网页大小固定区域滚动/overflow:auto移动端不显示滚动条
移动端网页大小固定区域滚动/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=http://www.mamicode.com/"js/iscroll.js" ></script>>
完美解决！
移动端网页大小固定区域滚动/overflow:auto移动端不显示滚动条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。