移动端布局 + 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 ...
随机推荐
- 深入Dagger:自定义AutoValue
前言 上一篇文章介绍了JavaPoet的原理和使用,这里在介绍一下AutoValue的原理,并模仿自定义实现一个AutoValue. AutoValue的是Google为了实现ValueClass设计 ...
- 通过list中值得名称查询索引号
>>> a = ['www','iplaypython','com']>>> a.index('iplaypython')
- 笔记63 Spring Boot快速入门（三）
SpringBoot中使用JSP Springboot的默认视图支持是Thymeleaf,但是Thymeleaf还没开始学,熟悉的还是jsp,所以要让Springboot支持 jsp. 一.在pom. ...
- PHP-移除元素
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
- KindEditor在eclipse里的配置方法
KindEditor介绍: kindEditor是一款国产富文本编辑器,类似fckeditor和目前比较流行的百度Ueditor.其产品官方网站为http://kindeditor.net/ Kind ...
- 【转】前后端分离架构：web实现前后端分离，前后端解耦
一.前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦.并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构 ...
- es5-class
1. 通过class定义类/实现类的继承2. 在类中通过constructor定义构造方法3. 通过new来创建类的实例4. 通过extends来实现类的继承5. 通过super调用父类的构造方法6. ...
- kubernetes(k8s)集群安全机制RBAC
1.基本概念 RBAC(Role-Based Access Control,基于角色的访问控制)在k8s v1.5中引入,在v1.6版本时升级为Beta版本,并成为kubeadm安装方式下的默认选项, ...
- 学习Caffe(一)安装Caffe
Caffe是一个深度学习框架,本文讲阐述如何在linux下安装GPU加速的caffe. 系统配置是: OS: Ubuntu14.04 CPU: i5-4690 GPU: GTX960 RAM: 8G ...
- 2015 ACM/ICPC Asia Regional Changchun Online HDU - 5441 (离线+并查集)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5441 题意:给你n,m,k,代表n个城市,m条边,k次查询,每次查询输入一个x,然后让你一个城市对(u,v ...