移动端布局 + 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 ...
随机推荐
- 五分钟学GIS | 快速生成地图瓦片秘籍
什么是地图瓦片? 地图瓦片是包含了一系列比例尺.一定地图范围内的地图切片文件.地图瓦片按照金字塔结构组织,每张瓦片都可通过级别.行列号唯一标记.在平移.缩放地图时,浏览器根据金字塔规则,计算出所需的瓦 ...
- ubuntu14.04 配置android studio环境
二.复制所需的文件到ubuntu 2.1.如果你还没有linux版本的android studio.sdk.jdk请先下载所需文件,我已经上传到百度网盘了 下载地址: android studio-l ...
- nexus私服仓库搭建以及项目引用
第一步:使用ubunto下载安装nexus 并打开登录进入到nexus管理页面,默认账号为 admin 密码在 admin.password 中,首次登录会让你重新修改密码 第二步 配置自己本地 ...
- 添加ali yum源
wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo #yum clean a ...
- Codeforces 1163E 高斯消元 + dfs
题意:给你一个集合,让你构造一个长度尽量长的排列,使得排列中任意相邻两个位置的数XOR后是集合中的数. 思路:我们考虑枚举i, 然后判断集合中所有小于1 << i的数是否可以构成一组异或空 ...
- wordpress 添加 显示磁盘剩余空间百分比的插件
在 wp-content/plugins 文件夹下 我取的文件名是: folder-sizes-dashboard-widget.php 在仪表盘 可以看到 Folder Sizes 标题的Box & ...
- 模拟+双指针——cf1244E
排一遍序然后用l,r指针进行移动,每次移动的是靠1,或靠n更近的那个指针 #include<bits/stdc++.h> using namespace std; typedef long ...
- delphi 给程序加托盘图标
一些程序运行时,会在桌面的右下角显示一个图标(任务栏的右边),这类图标称为 托盘.托盘是一个PNotifyIconDataA类型的结构,要增加托盘图标其实就是对结构PNotifyIconDataA的操 ...
- JS对象的讲解
1.对象属性的可枚举性和所有权:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_ ...
- 使用PHP和MySQL添加数据库时的小错误及注意事项总结
刚刚开始使用PHP和MySQL搭配着,从前端往数据库传数据,错误犯了不少,总结一下,提醒自己 1.写MySQL语句时,标点符号使用错 正确的应该是 $sql = "INSERT INTO ` ...