博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js学习总结----iscroll
阅读量:5095 次
发布时间:2019-06-13

本文共 1344 字,大约阅读时间需要 4 分钟。

先说一下一个小知识点

  在移动端开发中,使用position:fixed固定定位,很多的手机都支持的不好,尤其是在固定的区域还需要输入内容调取虚拟键盘的时候会出现很多很多的问题

  解决这个问题,就不能使用固定定位了,而使用局部滚动处理(ISCROLL)

  例如有下面一个场景,header的高度固定,需要在content里面加入滚动条,如下图

  

  下面是具体的代码实现 

//计算content区域的高度(实现竖向局部滚动,我们首先需要把最外层的容器的高度设置好)        var $content = $('.content');        $content.css('height',document.documentElement.clientHeight-$('.header')[0].offsetHeight);        //在数据绑定完成后实现局部滚动        /*            var 实例 = new IScroll(需要局部滚动的区域,{参数配置})            初始化成功后,只对当前容器中的第一个子元素实现了滚动操作            document.querySelector('.content').querySelector('*')            [settings]            scrollbars:true 显示滚动条  默认是不显示的(开启后ISCROLL会默认的向content区域增加一个iScrollVerticalScrollbarDIV,这个div控制的是滚动条,它的样式是position:absolute;所以如果只想让滚动条在容器中,需要给当前的滚动条增加position:relative)            mouseWheel:true  设置支持鼠标滚轮滚动            bounce:禁止运动到边界后反弹            click:true  ISCROLL为了防止滑动过程中的误操作,默认是把click禁止的,如果需要点击,则开启click即可            [方法]            myScroll.refresh:当滚动区域的内容发生改变的时候,我们让当前的实例刷新一下,这样的话滚动区域的相关值都会跟着重新计算            myScroll.scrollToElement([ele],[time]):用多长的时间滚动到具体的元素的某一个位置            myScroll.scrollTo(x,y,time):滚动到具体的坐标位置        */        var myScroll = new IScroll('.content',{            scrollbars:true,            mouseWheel:true,            bounce:false,            click:true        })

转载于:https://www.cnblogs.com/diasa-fly/p/7373413.html

你可能感兴趣的文章
MySQL索引背后的数据结构及算法原理
查看>>
#Leetcode# 209. Minimum Size Subarray Sum
查看>>
C#语言-04.OOP基础
查看>>
1)session总结
查看>>
PHP深浅拷贝
查看>>
SDN第四次作业
查看>>
ActiveMQ(4) ActiveMQ JDBC 持久化 Mysql 数据库
查看>>
DM8168 DVRRDK软件框架研究
查看>>
django迁移数据库错误
查看>>
epoll学习01
查看>>
yii 跳转页面
查看>>
闭包问题
查看>>
C#一个FTP操作封装类FTPHelper
查看>>
Linux运维基础入门(二):网络基础知识梳理02
查看>>
你所不知道的 CSS 阴影技巧与细节
查看>>
MyBatis框架的使用及源码分析(三) 配置篇 Configuration
查看>>
20172319 实验三《查找与排序》实验报告
查看>>
构造函数的继承
查看>>
Nginx的虚拟主机配置
查看>>
overflow 属性
查看>>