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和 ...
随机推荐
- Android组件化路由实践
Android应用组件化各个组件页面之间要实现跳转使用路由是一个很好的选择.本文将实现一个比较轻量级的路由组件,主要涉及以下知识: Annotation (声明路由目标信息) AnnotationPr ...
- Rxjs 操作符
1. javascript解决异步编程方案 解决javascript异步编程方案有两种,一种是promise对象形式,还有一种是是Rxjs库形式,Rxjs相对于Promise来说,有好多Promise ...
- 如何制作一个Nginx镜像
1,从这里你将学到编写Dockerfile的4个重要指令RUN,EXPOSE,ADD,ENTRYPOINT2,在Dockerfile中编写拷贝文件至容器的方法3, 安装一个nginx server,并 ...
- rpm，yum
rpm RedHat Package Manager软件包管理器的核心功能:1.制作软件包2.安装.卸载.升级.查询.校验.数据库的重建.验证数据包等工作 安装: rpm -i /PATH/TO ...
- SpringBootSecurity学习（17）前后端分离版之 OAuth2.0 数据库（JDBC）存储客户端
自动批准授权码 前面我们授权的流程中,第一步获取授权码的时候,都会经历一个授权是否同意页面: 这个流程就像第三方登录成功后,提问是否允许获取昵称和头像信息的页面一样,这个过程其实是可以自动同意的,需要 ...
- 快学Scala 第二课 （apply, if表达式，循环，函数的带名参数，可变长参数，异常）
apply方法是Scala中十分常见的方法,你可以把这种用法当做是()操作符的重载形式. 像以上这样伴生对象的apply方法是Scala中构建对象的常用手法,不再需要使用new. if 条件表达式的值 ...
- UE制作PBR材质攻略Part 1 - 色彩知识
目录 一.前言 二.色彩知识 2.1 色彩理论 2.1.1 成像原理 2.1.2 色彩模型和色彩空间 2.1.3 色彩属性 2.1.4 直方图 2.1.5 色调曲线 2.1.6 线性空间与Gamma空 ...
- C# WinForm 跨线程访问控件（实用简洁写法）
C# WinForm 跨线程访问控件(实用简洁写法) 1.<C# WinForm 跨线程访问控件(实用简洁写法)> 2.<基于.NET环境,C#语言 实现 TCP NAT ...
- Nebula 架构剖析系列（零）图数据库的整体架构设计
Nebula Graph 是一个高性能的分布式开源图数据库,本文为大家介绍 Nebula Graph 的整体架构. 一个完整的 Nebula 部署集群包含三个服务,即 Query Service,S ...
- Asp.Net Core中Session使用
web程序中,Session是一个无法避开的点. 最近新开项目,打算从开始搭建一个基础的架子,后台用户登录成功后,需要保存session. 新建的asp.net core的模板已经包含了Session ...