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和 ...
随机推荐
- One layer SoftMax Classifier, "Handwriting recognition"
import lib needed¶ In [1]: from PIL import Image import numpy as np import matplotlib.pyplot as ...
- mysql操作遇到的坑（第二版）
1.通过条件查询出上一条与下一条 sql说明:本表关联本表,然后通过其中一个表,查询出对应的条件,再用另外一个表求出上一条与下一条的数据,求出来的数据是多条的 SELECT ua.id, ua.wx_ ...
- win10下使用Linux命令
下载Cygwin安装包 官网下载地址:https://cygwin.com/install.html 执行下载好的安装程序 选择默认安装路径C:\cygwin64即可,可在C:\cygwin64\bi ...
- [Tricks] 为文件夹右键菜单增加 【使用VS Code 打开】
传统的IDE安装之后都会在文件夹的右键菜单中增加如[Open in Visual Studio]或者[Open Folder as IntelliJ IDEA Project]这样的选项 但VS Co ...
- 基于Docker和Golang搭建Web服务器
1 场景描述 基于centos7的docker镜像搭建golang开发环境 在docker容器内,使用golang实现一个Web服务器 启动docker容器,并在容器内启动Web服务器 我购买了一个最 ...
- opencv之膨胀与腐蚀
腐蚀和膨胀 Erosion/Dilation erosion/dilation,用白话说,就是让图像亮的区域收缩和扩张. 原理 我们定义一个卷积核矩阵.这个矩阵可以是任何形状的,但通常而言,是矩形或者 ...
- redis相关缓存知识
Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...
- Python基础库之jieba库的使用（第三方中文词汇函数库）
各位学python的朋友,是否也曾遇到过这样的问题,举个例子如下: “I am proud of my motherland” 如果我们需要提取中间的单词要走如何做? 自然是调用string中的spl ...
- Vue躬行记（3）——样式和表单
Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算 ...
- django模型中有外键关系的表删除相关设置
0904自我总结 django模型中有外键关系的表删除相关设置 一.一对一 例如有Author.AuthorDetail两表 author = models.OneToOneField(to='Aut ...