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和 ...
随机推荐
- JMeter 压测Server Agent无法监控资源问题，PerfMon Metrics Collector报Waiting for sample，Error loading results file - see file log， Can't accept UDP connections java.net.BindException: Address already in use 各种疑难杂症
如何安装插件此博主已经说得很详细了. https://www.cnblogs.com/saryli/p/6596647.html 但是需注意几点: 1.修改默认端口,这样可以避免掉一个问题.Serve ...
- Python学习笔记整理总结【Django】：中间件、CSRF、缓存
一.中间件 中间件是一类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法:在django项目的settings模块中,有一个 MIDDLEWARE 变量,其中每 ...
- python实现感知机线性分类模型
前言 感知器是分类的线性分类模型,其中输入为实例的特征向量,输出为实例的类别,取+1或-1的值作为正类或负类.感知器对应于输入空间中对输入特征进行分类的超平面,属于判别模型. 通过梯度下降使误分类的损 ...
- 先森林后树木：Elasticsearch各版本升级核心内容必看
在学习Elasticsearch 时候,因为各个版本的问题,搞不清,非常的头疼,官方也给出了各个版本更新的情况,不过是英文版本,版本更新信息又特别多,最近学习,看了很多资料,没有一个整理很清楚的,然后 ...
- layDate——设置最大日期不能超过当前日期
例如,当前年份是2018年,实现效果如下,2018年之后年份不可操作: 具体代码实现: layui.use([ 'laydate'], function () { var laydate = layu ...
- 集合线性表--List之ArrayList
集合操作——线性表 List: add().remove().subList().list.toArray().array.asList(). List排序: Collections.sort(li ...
- Swoole4-swoole创建Mysql连接池
一 .什么是mysql连接池 场景:每秒同时有1000个并发,但是这个mysql同时只能处理400个连接,mysql会宕机. 解决方案:连接池,这个连接池建立了200个和mysql的连接,这1000个 ...
- drf 框架
一. drf简介 drf框架,全程: django-rest framework , rest是插件名字,django插件的名字叫rest,framework是框架的意思 二. 接口 在平时生活 ...
- Web Storage和cookie的区别——每日一题20190629
Web Storage? 使用HTML5可以在本地存储用户的浏览数据. 使用的主要目的是为了克服Cookie带来的一些限制,当数据需要被严格控制在客户端上时,无需持续的将数据发回服务器 主要目标: 1 ...
- mobaxterm使用手册
Mobaxterm V14使用手册 文章出处 https://blog.51cto.com/937761/2372598 简介 MobaXterm 一款Windows系统下全功能终端软件.以下将 ...