移动端布局 + iscroll + 滚动事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
li{ list-style: none; }
a{ text-decoration: none; }
html, body{
width: 100%;
height: 100%;
} .header{
width: 100%;
height: 44px;
position: absolute;
top: 0;
left: 0;
background: red;
}
.header .title{
height: 44px;
text-align: center;
line-height: 44px;
font-size: 20px;
}
.header .button{
width: 60px;
height: 34px;
position: absolute;
top: 5px;
right: 5px;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
line-height: 34px;
color: #fff;
} .tabs{
width: 100%;
height: 49px;
position: absolute;
left: 0;
bottom: 0;
display: flex;
background: yellow;
}
.tabs li{
flex: 1;
}
.tabs li a{
display: block;
text-align: center;
line-height: 49px;
} .content{
position: absolute;
left: 0;
width: 100%;
top: 44px;
bottom: 49px;
overflow: hidden;
}
.content .banner{
width: 100%;
height: 200px;
background: yellowgreen;
}
.content .list li{
border-bottom: 1px solid #ddd;
line-height: 40px;
}
</style>
</head>
<body>
<header class="header">
<h1 class="title">首页</h1>
<a class="button">按钮</a>
</header> <!-- 主体 -->
<!-- content滚动视图 -->
<div class="content">
<!-- wrapper滚动容器 -->
<div class="wrapper">
<div class="banner"></div>
<ul class="list">
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
<li>列表--大是的发送到是</li>
</ul>
</div>
</div> <!-- tab切换 49px(逻辑像素) 98px(物理像素) -->
<nav class="tabs">
<li><a href="#">首页</a></li>
<li><a href="#">热门</a></li>
<li><a href="#">发现</a></li>
<li><a href="#">设置</a></li>
</nav> <script src="iscroll-probe.js"></script>
<script>
//让主体部分的内容滚动，需要满足的条件
//滚动视图（让谁滚动，就是谁成为滚动视图）
//滚动视图的容器 （滚动视图的第一个层级的子标签，并且所有需要滚动的内容都在这个标签之内）
//滚动视图大小固定，overflow：hidden //以上条件满足就可以创建滚动视图 //滚动起来：滚动视图的容器的大小 大于 滚动视图的大小 //创建滚动视图
//参数1：选择器，或dom对象
//参数2：配置参数
var scroll = new IScroll('.content', {
click: true, //iscroll为了性能最优
tap: true,
mouseWheel: true,
startY: -200,
scrollbars: true,
fadeScrollbars: true,
probeType: 3
})
// probeType：1 滚动不繁忙的时候触发
// probeType：2 滚动时每隔一定时间触发
// probeType：3 每滚动一像素触发一次 //添加滚动事件的监听
//开始滚动前的事件
scroll.on('beforeScrollStart', function(){
console.log('beforeScrollStart');
})
//开始滚动
scroll.on('scrollStart', function(){
console.log('scrollStart');
}) //正在滚动scroll，为了性能最优，将这个监听关闭了。
//打开这个监听，需要使用iscroll-probe.js,并且配置中设置probeType: 1/2/3
scroll.on('scroll', function(){
console.log('scroll');
console.log(scroll.y)
}) //滚动停止
scroll.on('scrollEnd', function(){
console.log('scrollEnd');
}) //滚动取消
scroll.on('scrollcancel', function(){
console.log('scrollcancel');
}) </script> </body>
</html>
移动端布局 + iscroll + 滚动事件的更多相关文章
- 移动端布局 + iscroll.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 移动端Web界面滚动touch事件
解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...
- H5案例分享：移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
- ios端阻止页面滚动露底
转自 http://www.eboy.me/archives/129: 在IOS端的微信中使用H5页面,页面滑动到底部时,再向上拉或页面在顶部时下拉,总会露出微信自带的底色:总是会让人不爽. 以下是一 ...
- 移动端布局 - REM方式
默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...
- 滚动事件优化 passive
1.addEventListener参数 target.addEventListener(type, listener[, options]); target.addEventListener(typ ...
- vue监听页面中的某个div的滚动事件，并判断滚动的位置
在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...
- js鼠标滑轮滚动事件绑定（兼容主流浏览器）
/** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...
随机推荐
- Shell内置命令let
- SecureCRT无法删除和退格的解决办法
一 选项中,设置自动保存 二 选项=>会话选项 选择linux终端.然后在映射键中,选择delete 等映射信息
- C++ 求最大公因数和最大公倍数模板
//求最大公因数 int gcd(int x, int y) { int MAX = max(x, y); int MIN = min(x, y); return MAX % MIN == 0? MI ...
- Dubbox离线约束地址
地址: http://code.alibabatech.com/schema/dubbo/dubbo.xsd
- 使用appium1.4在android8.0真机上测试程序时报错command failed shell "ps 'uiautomator'"的解决方式
appium1.4,运行自动化脚本时提示 org.openqa.selenium.SessionNotCreatedException: A new session could not be crea ...
- WebService发送 方法
public String disableSaleOut(JSONObject jsonObject) throws ServiceException, MalformedURLException, ...
- CSP-S2019初赛游记
考得不好,不过\(86.5\)分应该勉强能进. 比赛前 比赛前的一个星期是有点慌,因为初赛是必须要复习的.初赛和复赛很不一样,复赛可以得一等奖,初赛不一定能考得很好. 最恶心的当然是那些计算机的&qu ...
- 「题解」：$Smooth$
问题 A: Smooth 时间限制: 1 Sec 内存限制: 512 MB 题面 题面谢绝公开. 题解 维护一个队列,开15个指针,对应前15个素数. 对于每一次添加数字,暴扫15个指针,将指针对应 ...
- 【LeetCode 7】整数反转
题目链接 [题解] 没什么说的. 就注意一点. 可以在*10+n%10的时候. 顺便判断有没有溢出. (直接用longlong可真是机制..) [代码] class Solution { public ...
- BZOJ 5120: [2017国家集训队测试]无限之环(费用流)
传送门 解题思路 神仙题.调了一个晚上+半个上午..这道咋看咋都不像图论的题竟然用费用流做,将行+列为奇数的点和偶数的点分开,也就是匹配问题,然后把一个点复制四份,分别代表这个点的上下左右接头,如果有 ...