移动端网页大小固定区域滚动/overflow:auto移动端不显示滚动条
来源:互联网 发布:翻墙 淘宝 编辑:程序博客网 时间:2024/05/17 06:52
移动端网页,要实现功能,如图片
初步想法,使用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>
完美解决!
0 0
- 移动端网页大小固定区域滚动/overflow:auto移动端不显示滚动条
- overflow:auto; 固定大小出滚动条
- 移动端 显示滚动条
- 移动端默认显示滚动条
- 移动端 去除滚动条
- js移动端滚动条
- 移动端 隐藏滚动条
- 隐藏滚动条,移动端
- web移动端滚动条
- jQuery 滚动条插件之移动端 左右滑动不出现滚动条
- 网页背景图固定不动,不跟随滚动条滚动
- 网页背景图固定不动,不跟随滚动条滚动
- 网页背景图固定不动,不跟随滚动条滚动
- 网页背景图固定不动,不跟随滚动条滚动
- 移动端滚动条的问题之一
- 移动端去除横向滚动条
- HTML5 移动端 实现滚动条
- 网页背景不随滚动条移动
- linux socket 程序被ctrl+c或者异常终止,再次起程序时提示该端口号已被绑定,解决办法如下
- iOS8 屏幕适配问题。
- Java高手真经_编程基础卷——读书笔记(6)——Java代码规范
- Linux 64位编译hadoop源码
- 使用SecureCRT在远程主机和本地之间传输文件
- 移动端网页大小固定区域滚动/overflow:auto移动端不显示滚动条
- TCP/IP协议
- 设置应用内的系统控件语言
- 原生支持OpenFlow1.3协议的Mininet安装与验证
- ArcGIS教程:“交叉协方差云”工具
- 【Python学习笔记】Python练习题:filter()
- Spannable、Spanned、Editable用法及差别
- CornerStone破解
- gdb7.4安装