JS网页滚动条滚动事件实例分析

js网页滚动条滚动事件的用法,在javascript中window.onscroll监控滚动条滚动事件的相关技巧

本文实例讲述了js网页滚动条滚动事件用法，具体分析如下：
在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：window.onscroll。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部”
js网页滚动条滚动事件

    <style type="text/css"> #top_div{ position:fixed; bottom:80px; right:0; display:none; } </style> <script type="text/javascript"> window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "top_div" ); if( t >= 300 ) { top_div.style.display = "inline"; } else { top_div.style.display = "none"; } } </script> <a name="top">顶部<a> <div id="top_div"><a href="#top">返回顶部</a></div> <br /> <br /> <div> 这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去 </div>

例子语法解释
在 style 标签中首先定义 top_div css 属性：position:fixed;display:none; 是关键
javascript 语句中，t 得到滚动条向下滚动的位置，
当滚动超过 300 （像素）时，将 top_div css display 属性设置为显示(inline)，反之则隐藏(none)
必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度
PS：这里再为大家提供一个关于JS事件的在线工具，归纳总结了JS常用的事件类型与函数功能：
javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event

JS网页滚动条滚动事件实例分析相关推荐

jquery滚动条滚动事件_滚动条和jQuery –使用航点的事件处理
jquery滚动条滚动事件 How to handle scrolling with jQuery. Today we continue jQuery reviews, and our article ...
利用js获取滚动条滚动距离，实现图片固定在屏幕的某个位置
利用js获取滚动条滚动距离,实现图片固定在屏幕的某个位置思路: 1.获取对象距离顶部和左侧的距离: 2.获取元素对象: 3.当滚动条滚动时获取滚动条滚动的距离: 4.滚动条滚动时执行函数:对象距离顶 ...
HTML 鼠标绑定滚动条,js鼠标滑轮滚动事件绑定（兼容主流浏览器）
今天尝试写基于jquery的滚动条,遇到了滚轮事件的兼容性问题,在firefox下和在IE下以及其它浏览器下,监听的事件有区别,查了下相关资料总结一下不同浏览器下鼠标滚轮事件兼容性的处理方式: 在 f ...
js两种滚动事件写法
方式一:可判断滚动条滚动方向. $(window).scroll(() => {// 滚动条距文档顶部的距离, || 是做兼容处理的let scrollTop = window.pageYOff ...
关于IOS设备window onscroll滚动条滚动事件不触发的问题
http://blog.hooperui.com/%E5%85%B3%E4%BA%8Eios%E8%AE%BE%E5%A4%87window-onscroll%E6%BB%9A%E5%8A%A8%E6 ...
Javascript设置滚动条向上滚动的方法；JS设置滚动条滚动的代码
很久就没有碰前端的后果就是,自己被公司叫来帮忙自己结果啥都会,但是就想不起怎么操作画布哆嗦咱们直接来看代码重点一:获取滚动条Y轴的数据这个方法有很多,我就不一一讲述了,毕竟结果都一样就好直接 ...
JS阻止浏览器滚动事件
在前几天的项目中,场景值如下: 1.动态生成列表,列表高度不固定 2.外面父元素的属性设置为overflow:auto; 3.鼠标移动到列-li中的a上,出现选择列表,鼠标在列表上,列表不消失 4.当 ...
js禁止滚动条滚动并且隐藏滚动条
禁止鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return false;} 恢复鼠标滑过滚动条滚动 document.body.onmou ...
js水平无缝滚动代码实例详解
本章节分享一段代码实例,它实现了图片无缝水平滚动效果. 这样的功能在实际应用中比较常见,感兴趣的朋友可以做一下参考. 代码如下: <!doctype html> <html> ...

JS网页滚动条滚动事件实例分析

JS网页滚动条滚动事件实例分析相关推荐

最新文章

热门文章