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和 ...
随机推荐
- Save&Load--Unity存档读档的学习总结
存档与读档功能 举例: 传统RPG游戏(仙剑.空之轨迹): 1.角色信息(生命值,等级) 2.道具信息(装备,药品) 3.场景信息(场景名称.角色坐标) 4.事件信息(任务相关) 关卡类游戏:关卡的通 ...
- Mycat 配置文件schema.xml
1.介绍 schema.xml 作为 MyCat 中重要的配置文件之一,管理着 MyCat 的逻辑库.表.分片规则. DataNode 以及 DataSource. 2.schema相关标签 sche ...
- ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得
今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术 即,AJAX是一个[局部刷新 ...
- Python邮件发送功能
import smtplibfrom email.mime.text import MIMEText_user = "1147016115@qq.com"#发件人_pwd = &q ...
- Spark 学习笔记之 aggregateByKey
aggregateByKey: import org.apache.spark.SparkContext import org.apache.spark.rdd.RDD import org.apac ...
- Java 学习笔记之 Thread运行过程分析
Thread运行过程分析: 以下是一个最普通的Thread实现过程,我们今天就来看仔细分析下他是如何运行的. public class ThreadRunMain { public static vo ...
- 版本控制之Git小结
一.版本控制 1.1 什么是版本控制 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版本修订情况的系统.可以对任何类型的文件进行版本控制. 1.2 为什么需要版本控制 有了版本控制就可以 ...
- Window下的VScode快捷键
转载自4ark 全局 Ctrl + Shift + P, F1 显示命令面板 Ctrl + P 快速打开Ctrl + Shift + N 打开新窗口Ctrl + Shift + W 关闭窗口 基本 C ...
- KafkStream架构
Kafka Stream 的整体架构图如下. 目前KafkaStream的数据源智能是如上图所示的Kafka,但是处理结果并不一定是如上图所示的输出到Kafka,实际上KStream和Ktable的实 ...
- 【TencentOS tiny】深度源码分析（6）——互斥锁
互斥锁 互斥锁又称互斥互斥锁,是一种特殊的信号量,它和信号量不同的是,它具有互斥锁所有权.递归访问以及优先级继承等特性,在操作系统中常用于对临界资源的独占式处理.在任意时刻互斥锁的状态只有两种,开锁或 ...