移动端布局 + 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 ...
随机推荐
- Asp.net Controller中View 和Action方法认证Authorize 及对AuthorizeAttribute扩展
Asp.net Controller中View和Action方法认证Authorize 在建立Web 站点安全性时 1.登录后才可访问系统文件 ——限制 Forms认证 <authenticat ...
- 【Luogu】【关卡2-3】排序（2017年10月） 【AK】
任务说明:将杂乱无章的数据变得有规律.有各种各样的排序算法,看情况使用. 这里有空还是把各种排序算法总结下吧.qsort需要会写.. P1177 [模板]快速排序 这个题目懒得写了,直接sort了.. ...
- 线程池——Executors
一 Executor框架 为了更好地控制多线程,JDK提供了一套线程框架Executor,帮助开发人员有效的进行线程控制.它们都在java.util.concurrent包中,是JDK并发包的核心.其 ...
- jmeter之-用Firefox录制https协议证书问题
录制脚本的时候,比如录制https协议的百度网站 https://www.baidu.com ,所有录制设置均正常,但是在jmeter录制控制器里面就是没有任何录制的请求. 这个时候提示说证书不对 1 ...
- centos 安装 git
先安装依赖包yum install -y curl curl-devel zlib-devel openssl-devel perl perl-devel cpio expat-devel gette ...
- [NOIP模拟15]题解
A.建设城市(city) 这容斥题多难啊你们是怎么考场切掉的啊 首先可以想一下,如果没有k的限制,这题怎么做? 相信你们肯定能看出来是挡板法裸题:m个物品分给n个人,每个人至少一个. 就是$C_{m- ...
- JAVA并发工具类---------------(CountDownLatch和CyclicBarrier)
CountDownLatch是什么 CountDownLatch,英文翻译为倒计时锁存器,是一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 闭锁可以延迟线程的进 ...
- windows10自动更新好烦啊
cmd下输入services.msc,找到windows update,把手动变成禁用. https://blog.csdn.net/hwzzyr/article/details/81190442 h ...
- Golang 标准库log的实现
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://gotaly.blog.51cto.com/8861157/1406905 前 ...
- 在一台机上搭建多个MYSQL并设置主从
安装 cd /usr/local/src/ -linux2.-x86_64.tar.gz -linux2.-x86_64 /usr/local/mysql grep mysql /etc/passwd ...