移动端网页大小固定区域滚动/overflow:auto移动端不显示滚动条
2014-12-24 14:00
453 查看
移动端网页,要实现功能,如图片
![](https://img-blog.csdn.net/20141224140109946?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl4aWFvX25haWhl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
初步想法,使用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;"><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>
完美解决!
初步想法,使用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; 固定大小出滚动条
- css textarea固定大小不显示滚动条
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 【CSS】css实现移动端或手机网页上溢出滚动但隐藏滚动条的原理和方法
- css textarea固定大小不显示滚动条
- bootstrap表格固定表头,表格内容滚动条滚动显示
- CSS---前端通过 css如何实现overflow:auto滚动超出部分的同时隐藏滚动条?
- 网页背景图固定不动,不跟随滚动条滚动
- 如何在网页两边显示随滚动条滚动的广告
- 网页背景图固定不动,不跟随滚动条滚动
- IE6的overflowauto的不显示滚动条问题
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 网页背景图固定不动,不跟随滚动条滚动
- overflow:auto滚动在移动端出现滑动不流畅问题
- 移动端网页修改滚动条样式使滚动条默认显示
- highcarts x轴间距固定 多出显示区域出现滚动条
- VUE2.0 实现移动端在固定区域内的滚动效果
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- css将div层固定显示在页面底部不随滚动条滚动
- 网页背景图固定不动,不跟随滚动条滚动