scroll事件

最新推荐文章于 2024-06-17 04:02:21 发布
最新推荐文章于 2024-06-17 04:02:21 发布
阅读量153 收藏
点赞数
分类专栏： web开发 文章标签： HTML
可以通过给body添加onscroll属性或者把事件处理函数分配给window.onscroll属性。
下面是一个始终在页面的顶部显示的水印。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onscroll =function(){
  var oWatermark = document.getElementById("divWatermark");
  oWatermark.style.top = document.body.scrollTop;
}
//-->
</SCRIPT>
<div id ="divWatermark" style = "position:absolute; top :0px;right:0px; color:#cccccc; width:150px;height:30px; backgrond-colot:naty">Watermark</div>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
<p>212121</p>
</BODY>
</HTML>
iteye_14227
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（5）元素滚动scroll系列、scroll事件、侧边栏案例
weixin_59598992的博客
01-24 2952
scroll翻译过来就是滚动的，我们使用scroll相关系列的属性可以动态的得到该元素的大下，滚动距离等。 element.scrollTop 返回被卷去的上侧距离（有滚动条时，下滑上侧内容会被卷去），返回数值不带单位 element.scrollLeft 返回被卷上的左侧距离，返回数值不带单位 element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位 element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位
JQuery_scroll事件
weixin_49758373的博客
06-07 574
1：定时器 JavaScript 在浏览器中是单线程执行的，但允许使用定时器指定在某个时间之后或每隔一段时间就 执行相应的代码。 延时调用： setTimeout()用于指定在一定时间后执行某些代码， 定时调用： setInterval()用于指定 每隔一段时间执行某些代码。 setTimeout() setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次 SetTimeout()方法通常接收两个参数：要执行的代
Vue框架学习笔记——事件scroll和wheel的区别
Aer_7z的博客
11-26 1699
描述scroll滚动条事件和wheel鼠标滚轮事件，以及二者的不同
元素滚动 scroll 与 scroll 事件
最新发布
2401_85124218的博客
06-17 595
返回滚动后被卷上去的距离，返回值无单位，此处说的滚动上去是我们针对溢出的情况，往往会在样式里加上。）**，返回值无单位，主要针对的是内容超过了盒子大小溢出的情况，返回的值包括了溢出的高度。，这是给盒子加上了滚动条，就可以拖动滚动条查看溢出的部分，所以此时返回的值是。返回自身的实际高度**（
滚动事件与加载事件
大鹏的博客
12-15 3243
当初始的HTML文档完全加载和解析完成之后,DOMContentLoaded事件被触发,无需等待样式表,图像等完成加载。注意: 不光可以监听整个页面资源的加载完毕,也可以针对某个资源绑定load事件。加载外部资源(如图片, 外联CSS和JavaScript)加载完毕是触发事件。给document添加DOMContentLoaded事件。监听某个元素的内部滚动直接给某个元添加元素即可。事件名:DOMContentLoaded。给window添加load事件。当页面进行滚动触发事件。事件名: scroll。
scroll事件及其应用
weixin_46500485的博客
09-03 1602
scroll事件及其应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
js的scroll事件
热门推荐
sunset的博客
07-25 1万+
 这个代码是在id为box的div里写了很多p标签然后溢出,给#box设置overflow:scroll;然后在#box里滚动条滚动时就会输出 &lt;script&gt; var box = document.getElementById("box"); // 元素对象的onscroll事件,当元素内容发生滚动时触发,它是一个频繁触发的事件 box.onscroll ...
javascript阻止scroll事件多次执行的思路及实现
10-26
为了避免这种情况，本文档将探讨在JavaScript中阻止scroll事件多次执行的思路及实现方法。 首先，理解问题的背景是非常关键的。在许多网页特效中，我们可能预期用户每次滚动后都执行特定的操作，但实际上，连续快速...
使用vue.js在页面内组件监听scroll事件的方法
10-18
本文将介绍如何在Vue.js中实现页面内组件监听scroll事件的功能。 首先，需要明确的是，当我们在页面中监听滚动事件时，一般情况下我们会想到使用JavaScript的`window.addEventListener`方法来添加滚动事件监听器。...
window resize和scroll事件的基本优化思路
12-10
同事在项目中使用scroll事件去加载数据，结果IE下悲剧了。给了一个简单优化方法，效果明显。 只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 ...
scroll事件总结
weixin_30549175的博客
05-10 589
一般监听窗口的滚动事件都是给window,document,body绑定滚动事件。但是需要注意以下几点： （1）给body绑定scroll事件时，this指向window （2）不管给谁绑定，要获取scrollTop值都是通过document.body来获取。即document.body.scrollTop.window和document是没有scrollTop值的。 给普通盒子设置s...
滚动加载事件-scroll、offset、client家族
qq_54201133的博客
06-06 575
滚动加载事件-scroll、offset、client家族
元素滚动 scroll 与 scroll 事件，你必须知道的CSS盒模型
2401_84092809的博客
04-05 299
我们在此主要研究与，其他两个同理一：返回自身的实际高度**（）**，返回值无单位，主要针对的是内容超过了盒子大小溢出的情况，返回的值包括了溢出的高度。
JavaScript滚动事件
爱蹦跶的全栈大A阿
02-10 1965
滚动是网页交互不可或缺的一部分。监听页面和元素的滚动事件,可以帮助我们实现许多实用的功能。本文将详细介绍页面与元素的滚动事件,如何跟踪滚动距离,以及判断滚动到底部的方法。通过学习,相信大家可以轻松处理各种滚动需求,丰富页面交互体验。​滚动事件为我们提供了实时访问滚动状态的能力。合理使用可以避免过度重复渲染,优化性能。本文不仅介绍了滚动事件的监听方法,还展示了防抖处理和监听内容变化的技巧。希望通过这个博客,大家已可以轻松应对各种滚动事件处理需求。如果还有疑问,欢迎评论区讨论。​。
vue中监听scroll事件失效的问题及解决。
weixin_47404583的博客
09-23 1194
因为我写的div 只是window内部的一个小元素，所以，需要向下捕获才可以。vue中监听scroll事件失效的问题及解决。无法监听到滚动的事件，不打印console。vue 监听scroll 事件也不生效。对于这个问题解释一下这三个参数吧。
scroll事件详解
天行健，自强不息 ; 地势坤，厚德载物
09-19 2727
以前眼高手低，不够扎实，面试的时候总是处理过，却想不出来细节，这次开始慢慢整理，蜗牛继续爬坡 CSS 一般情况下，如果出现内容大于浏览器的时候，需要添加样式 overflow：scroll 关于scroll的样式有以下可以根据需求调整： 滚动条的设置 1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等 2. ::-webkit-scrollbar-butt...
js scroll事件
weixin_33701564的博客
06-12 789
滚动改变头部颜色，当滚动到最顶端头部颜色还原 滚动前 滚动后 代码 转载于:https://www.cnblogs.com/peipeiyu/p/11011310.html
关于这么多次对于scrollTop的使用情况和onscroll事件
qq_32798243的博客
11-29 3422
看了很多的关于scrollTop属性的分析自己也进入了不少坑（毕竟自己是一个菜鸟加智障），所以特此来总结一下，如果有不对的地方大家快来纠正我啊！！！ 大家都知道scrolltop是用来让元素向上翻的高度，使用情景：只有父元素的高度小于子元素同时，父元素设置了overflow：hidden和overflow：scroll才可以让父元素的高度卷上去设置scrolltop才可以生效，否则在我们父元素中
js 滚动条 scroll属性/事件 兼容滚动条方法 获取滚动条信息 操作滚动条(scroll() scrollTo() scrollBy()) 获取窗口滚动条偏移量
weixin_42448623的博客
10-26 1615
window.pageXOffset/pageYOffset x轴/y轴 滚动距离 IE8及以下不兼容 IE8 及以下浏览器 支持 兼容性比较混乱 用时取2个值相加，因为两个值不可能同时存在 一个存在，另一个必然为0 document.body.scrollLeft/scrollTop document.documentElement.scrollLeft/scrollTop 封装 兼容滚动条...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值