移动端布局 + 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 ...
随机推荐
- guake No D-BUS daemon running
Win 键 搜索 Startup Application 添加 启动脚本 eval `dbus-launch --auto-syntax` 在其之后添加 guake & 开机启动 .
- 通过list中值得名称查询索引号
>>> a = ['www','iplaypython','com']>>> a.index('iplaypython')
- MySQL--分组数据
1.数据分组 #连接数据库 use newschema; #查看表中数据 select *from products: #返回供应商1003提供的产品数目 ; 2.创建分组 select vend_i ...
- 2019南昌邀请赛预选赛 I. Max answer （前缀和+单调栈）
题目:https://nanti.jisuanke.com/t/38228 这题题解参考网上大佬的. 程序的L[i],R[i]代表a[i]这个点的值在区间 [L[i],R[i]] 中最小的并且能拓展到 ...
- Java基础之ArrayList类
一.ArrayList ArrayList继承了AbstractList分别实现了List.RandomAccess(随机访问).Cloneable(可被克隆(复制的意思)). Serializabl ...
- 创建一个wx.App的子类
#_author:来童星#date:2019/12/20#创建一个wx.App的子类import wxclass App(wx.App): #初始化方法 def OnInit(self): frame ...
- Ubuntu开放对外端口
1.查看已经开启的端口 sudo ufw status 2.打开80端口 sudo ufw allow 80 3.防火墙开启 sudo ufw enable 4.防火墙重启 sudo ufw relo ...
- js过滤字符串中的html标签
var str = 'add<a>daad</a><p>fsdada</p>' str.replace(/<[^<>]+>/g, ...
- jQuery冒泡事件阻止
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- 学 Win32 汇编[21] - 传送指令: MOV、LEA、XCHG、XLATB、XLAT、MOVZX、MOVSX
汇编指令的一般性要求: 1.两个操作数的尺寸必须一致; 2.操作数不能同为内存. MOV(Move): 最常用的数据传送指令 ;该指令不影响 EFlags ;指令格式: (其中的 r.m.i 分别表示 ...