js中的onscroll的用法

秒速五厘米 2022-07-15 11:52 350阅读 0赞

onscroll是在元素轴滚动时触发的。

eg:如<div οnscrοll=“myfunc()”></div>是在div滚动条滚动时触发的。

eg:window.onscroll或document.onscroll是在浏览器滚动条滚动时触发的。

利用onscroll可以用来显示“回到顶部“这一功能，是在浏览器滚动到一定程度时，显示"回到顶部";

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style>  
\#div1  
\{  
background-color:lightblue;  
width:200px;  
position:fixed;  
bottom:50px;  
right:0px;  
display:inline;  
\}  
</style>  
  
  
<script>  
    window.οnscrοll=function()  
\{  
var t=document.documentElement.scrollTop||document.body.scrollTop;  
if(t>=50)  
\{  
document.getElementById("div1").style.display="inline";  
\}  
else  
\{  
document.getElementById("div1").style.display="none";  
\}  
  
\}  
</script>  
</head>  
<body>  
<a name="top">top</a>  
<div id="div1"><a href="\#top">返回顶部</a></div>  
<br/>.....  
</body>  
</html>

[JavaScript onscroll 事件：滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果][JavaScript onscroll _ onscroll _ _]

[scrollTop][]

[html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍][html_offsetTop_clientTop_scrollTop_offsetTop]

[JavaScript onscroll _ onscroll _ _]: http://www.5idev.com/p-javascript_events_onscroll.shtml
[scrollTop]: http://www.jb51.net/article/18368.htm
[html_offsetTop_clientTop_scrollTop_offsetTop]: http://blog.csdn.net/fswan/article/details/17238933

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关 js中?.、??的具体用法

目录 1、?. （可选链运算符） 2、??（空值合并运算符） -------------------- 1、`?. （可选链运算符）` 在javascri

你的名字/ 2023年10月09日 16:12/ 0 赞/ 71 阅读

相关 js中replace的用法

replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中：stringObj是字符串(string)，reExp可以是正则

亦凉/ 2023年10月08日 22:40/ 0 赞/ 62 阅读

相关 js中...的用法

参考文章：[https://blog.csdn.net/alwyn0721/article/details/127256831][https_blog.csdn.net_alw

短命女/ 2023年10月04日 23:57/ 0 赞/ 44 阅读

相关解决js中onscroll事件失效的办法

前言: 这几天在写界面时，想要使用onsrcoll事件，以便达到滑动到一定位置时出现想要的效果, 但是在实现过程中,并没有理想的出现该出现的效果,在网上查阅了很多办法，

浅浅的花香味﹌/ 2022年10月31日 00:38/ 0 赞/ 988 阅读

相关 js中getElementById()的用法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

冷不防/ 2022年07月24日 06:19/ 0 赞/ 213 阅读

相关 js中的onscroll的用法

onscroll是在元素轴滚动时触发的。 eg:如<div οnscrοll=“myfunc()”></div>是在div滚动条滚动时触发的。 eg:window.onsc

秒速五厘米/ 2022年07月15日 11:52/ 0 赞/ 351 阅读

相关 js中this的用法

说到this，对于它的理解就是：this是指向函数执行时的当前对象，倘若没有明确的当前对象，它就是指向window的。 1.setTimeout(functtion

缺乏、安全感/ 2022年07月15日 07:43/ 0 赞/ 306 阅读

相关 js中with的用法

1. with(arg) \{ 2. statement 3. \} 4. // arg在执行参数体的时候js通过with将arg加入大括号

我就是我/ 2022年07月12日 15:24/ 0 赞/ 310 阅读

相关 JS中"&&"的其它用法

首先来了解一下 “&&”操作符的工作原理： “&&”连接两个表达式，当两侧表达式都为真时，返回TRUE。有一个为假则返回FALSE。那么实际运行时，JavaScript到

素颜马尾好姑娘i/ 2022年03月26日 04:40/ 0 赞/ 397 阅读

相关 js中prototype的用法

看例子就懂了例1 可以在外部使用prototype为自定义的类型添加属性和方法 <script type="text/javascript"> f

阳光穿透心脏的1/2处/ 2021年09月29日 10:34/ 0 赞/ 510 阅读