移动端的iscroll
来源:互联网 发布:java elasticsearch 编辑:程序博客网 时间:2024/05/22 02:06
在PC端的时候,我们使用的是position:fixed的方法使得导航栏,标题栏等固定在头部
但是,在移动端的开发当中,使用position:fixed固定定位,很多手机都支持不好,尤其是在定位的区域还需要输入内容调取虚拟键盘的时候会出现很多很多的问题
解决这个问题,就不能使用固定定位了,而使用局部滚动出来(iscroll)
首先,给整个html的width和height都设置为100%,并且overflow:hidden,这样保证我们的页面有且只有一屏
html, body { width: 100%; height: 100%; color: #000; font-size: .14rem; font-family: "microsoft Yahei", "Arial Narrow"; overflow: hidden; }然后,给下面内容多的区域做局部滚动。
这里要先固定这个区域的高度,计算方式:整个屏幕的高度 - 头部的高度
<!--第一步--> <script type="text/javascript" src="js/ejs.min.js"></script> <!--第三步--> <script type="text/template" id="conTemplate"> <%$.each(matchData,function(index,item){%> <li> <span><%=item.num%></span> <span><%=item.name%></span> <span><%=item.sex%></span> <span><%=item.score%></span> </li> <%})%> </script> <script type="text/javascript" src="js/zepto.min.js"></script> <script type="text/javascript" src="js/iscroll-5.1.3.min.js"></script> <script type="text/javascript"> // rem document.documentElement.style.fontSize = document.body.clientWidth / 320 * 100 + "px"; ~function () { var $content = $('.content'); //计算content区域的高度 // 实现竖向局部滚动,我们首先需要把最外层容器的高度设定好 $content.css('height', document.documentElement.clientHeight - $('.header')[0].offsetHeight); // 第四步 数据绑定 function bindHTML(data) { var conTemplate = $("#conTemplate").html(); var result = ejs.render(conTemplate, {matchData: data}); $content.children('ul').html(result); //在数据绑定完成之后再实现局部滚动 /* * var 实例 = new IScroll(需要局部滚动的区域,{配置参数}); * 初始化成功后,只对当前容器中的第一个子元素实现了滚轮操作, * document.querySelector('.content').querySelector('*') * [设置settingd] * scrollbars: true 显示滚动条,默认是不显示的(开启后,iscroll会默认向content区域 * 添加一个类名为iScrollVerticalScrollbar iScrollLoneScrollbar的div盒子, * 这个div控制的是样式position:absolute;所以如只想让滚动条在容器中, * 需要给当前的content增加position:relative) * fadeScrollbars: true 滚动条当鼠标在区域中的时候显示,离开的时候消失 * mouseWheel: true 设置支持鼠标滚轮滚动 * bounce:false 禁止运动到边界之后反弹 * click: true iscroll为了防止滑动过程中的误操作,默认是把click禁止掉的 * 如果需要点击,则开启click即可 * * [方法] * myScroll.refresh() 当滚动区域的内容发生改变的时候,我们让当前的实例刷新一下 * 这样的话滚动区域的相关值都会跟着重新计算 * myScroll.scrollTo(x,y,time) 滚动到具体的坐标位置 * myScroll.scrollToElement($li[$li.length - 1], 300); 300ms后滚动到最后一个元素 * */ var myScroll = new IScroll('.content', { scrollbars: true, fadeScrollbars: true, mouseWheel: true, bounce: false, click: true }); myScroll.refresh(); // myScroll.scrollTo(0,-1000,300); var $li = $content.find('li'); myScroll.scrollToElement($li[$li.length - 1], 300); } // 第二步 $.ajax({ url: 'json/data.json', type: 'get', dataType: 'json', cache: false, success: bindHTML }); }(); </script>可以设置滚动条的颜色或者透明度
同时,设置content的position:relative是为了让滚动条只出现在content区域里面
.content { position: relative; overflow: hidden; } .iScrollIndicator { opacity: 0.5; }这样就完成了局部滚动的操作
在ios上,如果存在局部滚动,就要在局部滚动的区域加上这个属性,如果不加,滚动会很慢,而且看起来会有一卡一卡的感觉
阅读全文
0 0
- 移动端的iscroll
- 移动端iScroll
- 移动端滚动插件iScroll
- 移动端的 jquery——移动端滚动条插件iScroll.js API文档
- web移动端:iscroll实现局部滚动
- iscroll.js移动端滚动插件
- iscroll.js listloading.js是一个移动端的上拉、下拉加载更多的组件
- 移动端iscroll局部滑动效果的实现及遇到的问题
- iscroll.js listloading.js是一个移动端的上拉、下拉加载更多的组件
- 关于移动端用iscroll动画出现闪烁和迟钝(不流畅)的现象记录
- 关于iscroll插件在移动端的应用滑动出现卡顿、不流畅问题
- 最简单易理解的完善iscroll移动端无法上拉请求数据加载更新
- 移动设备web开发插件iScroll的使用详解
- 移动WebApp之iScroll插件的使用介绍
- 移动设备web开发插件iScroll的使用详解
- 关于移动iscroll项目中使用的一些坑
- iScroll 4的用法
- iScroll的使用
- 第四周 项目2
- TensorFlow 曲线拟合
- spring ListableBeanFactory接口中getBeansOfType和BeanFactory接口的isTypeMatch方法实现分析
- HDU2609 How many(字符串的最小表示法)
- HDU 1873 看病要排队
- 移动端的iscroll
- 基于spring+springmvc+mybatis的图书管理系统
- hosts设置和ssh设置
- 如何解决 Linux 虚拟机磁盘设备名不一致的问题
- MongoDB详解
- ubuntu16.04 编译freeswitch1.9的视频mod_av模块
- ssh: connect to host localhost port 22: Connection refused
- Unity学习笔记4-Unity中默认函数调用顺序
- 安装node.js 遇到 error code为2503,2502问题解决方法