js滚动事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 700px;
height: 7000px;
background: cornsilk;
}
.child1{
width: 100px;
height: 100px;
background: skyblue;
position: absolute;
left: 50%;
top: 2000px;
}
.ani{
animation: suofang 1s alternate infinite;
}
@keyframes suofang{
from{transform: scale(1);}
to{transform: scale(2);}
} .child2{
width: 100px;
height: 100px;
background: skyblue;
position: absolute;
left: 50%;
top: 4000px;
}
</style>
</head>
<body>
<div class="div1"> <div class="child1"> </div> <div class="child2">回到上面</div>
</div>
<script type="text/javascript">
var html = document.querySelector('html')
window.onscroll = function(e){
console.log(e)
console.log(window.scrollY)
console.log(html.scrollTop) if(window.scrollY>1500){
var child1 = document.querySelector('.child1')
child1.className = 'child1 ani'
} } document.querySelector('.child2').onclick = function(e){
//设置全局滚动条滚动的位置
//window.scrollTo(0,0)
//设置垂直滚动条位置
// html.scrollTop = 0
// //设置水平滚动条的位置
// html.scrollLeft = 0
}
</script>
</body>
</html>
js滚动事件的更多相关文章
- js滚动事件实现滚动触底加载
移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- JS鼠标滚动事件
-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- js鼠标滑轮滚动事件绑定（兼容主流浏览器）
/** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...
- js给页面添加滚动事件并判断滚动方向
<script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...
- js监控鼠标滚动事件
//滚动动画 windowAddMouseWheel(); function windowAddMouseWheel() { var scrollFunc = function (e) { e = e ...
- 19 01 15 js 尺寸相关 滚动事件
尺寸相关.滚动事件 1.获取和设置元素的尺寸 width().height() 获取元素width和height innerWidth().innerHeight() 包括padding的width和 ...
随机推荐
- git 查看分支
1.查看本地分支 git branch 2.查看所有分支 git branch -a 2.查看所有分支及对应版本信息 git branch -va
- 难题解决：Mycat数据库中间件+Mybatis批量插入数据并返回行记录的所有主键ID
一.mybatis的版本必须为3.3.1及其以上 项目所依赖的mybatis的版本必须为3.3.1及其以上,低版本的不行,保证hap项目的依赖的mybatis的jar的版本必需为需要的版本: 二.在 ...
- 如何配置VMware客户虚拟机使用NAT模式联网通信
本例中配置客户虚拟机(CentOS)使用NAT(网络地址转换Network Address Translation)模式进行联网到公网(互联网).客户机网段为192.168.1.0/24网段,经NAT ...
- docker 更新后出现 error during connect
docker更新后出现 error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.39/containers/json: o ...
- IDEA 学习笔记之 安装和基本配置
安装和基本配置: 下载:https://www.jetbrains.com/idea/download/#section=windows 下载Zip安装包: 基础知识: Eclipse的工作区=IDE ...
- 阿里云Centos操作Mysql
1. CentOS7 yum方式安装MySQL5.7 2.Centos下mysql导入sql 3.Centos设置远程 4.CentOS下mysql数据库常用命令总结 5.centos出现“Fire ...
- IOS上传到App Store出现证书未安装问题
今天在提交自己的APP到苹果商店去审核的时候,编译成功后.upload过程中,提示 XXX Select the certificates you wish to include in this pr ...
- Python多任务之进程
Process多进程 进程的概念 程序是没有运行的代码,静态的: 进程是运行起来的程序,进程是一个程序运行起来之后和资源的总称: 程序只有一个,但同一份程序可以有多个进程:例如,电脑上多开QQ: 程序 ...
- SDN网络IPv6组播机制支持实时视频业务海量用户扩展
以 OpenFlow 技术为核心的软件定义网络(SDN)框架具有集中控制的功能能够自己感知网络拓扑的变化,在细粒度的路径选择.接入控制.负载均衡方面有着天然的优势,为 IPv6 组播功能的实现提供了好 ...
- Jquery的load加载本地文件出现跨域错误的解决方案
如果用原生的AJAX是加载本地文件就不会出现错误.当然,这个jquery的load放在服务器上通过http加载还是支持的.也有例外比如在firefox和ie浏览器使用$.ajax加载本地html或tx ...