页面滚动监听事件

红太狼 2022-02-01 02:51 623阅读 0赞

## 滚动监听事件 ##

一般网页中的返回顶部按钮都是通过滚动监听事件来实现的  
**这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed**  
![4444][]

css样式

.fixed {
                position: fixed;
                top: 60px;
                right: 175px;
                width: 390px;
            }
            .abs {
                position: absolute;
                bottom: 18px;
                right: 0;
            }

js代码

window.onscroll=function () {
    			//获取滚动条到顶部的距离
                var t=document.documentElement.scrollTop || document.body.scrollTop;
                //获取要操作元素的id
                var scrollUp=document.getElementById('right');
                //判断滚动条高度，设置事件
                if(t>300 && t<1986){
                    scrollUp.classList.remove("abs");
                    scrollUp.classList.add("fixed");
                }else if(t>1986){
                    scrollUp.classList.remove("fixed");
                    scrollUp.classList.add("abs");
                }else {
                    scrollUp.classList.remove("fixed");
                    scrollUp.classList.remove("abs");
                }
            }

[4444]: /images/20220201/09b44d0d9e334ef7a8ce26dc07778b89.png

发表评论取消回复

表情：

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

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

相关阅读

相关 html监听整个页面滚动事件（监听用户是否正常访问）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>监

蔚落/ 2023年05月29日 11:49/ 0 赞/ 110 阅读

相关 js监听scrolltop_JS监听页面滚动到底部事件

Eclipse安装Spring-tool-suite 目录结构: // contents structure \[-\] 在Eclipse上安装Spring-tool-sui

分手后的思念是犯贱/ 2023年01月09日 01:12/ 0 赞/ 287 阅读

相关 js监听html页面的上下滚动事件方法

html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

柔情只为你懂/ 2022年12月21日 04:55/ 0 赞/ 534 阅读

相关 JS页面滚动监听

window.onscroll = function() { //scrollTop就是触发滚动时的高度 var scroll= docume

分手后的思念是犯贱/ 2022年12月02日 15:20/ 0 赞/ 264 阅读

相关 JS监听页面滚动

mounted(){ document.addEventListener('scroll', this.scroll) }, beforeDe

谁践踏了优雅/ 2022年11月22日 00:12/ 0 赞/ 368 阅读

相关监听滚动条事件

滚动条事件可以监听整个页面也可以监听某一div或者iframe，举例： //监听整个窗口的滚动条 window.onscroll = function()

迈不过友情╰/ 2022年06月07日 23:18/ 0 赞/ 760 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 02:51/ 0 赞/ 624 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 06:39/ 0 赞/ 783 阅读

相关 React 监听页面滚动

const scrollEvent = event => { if (!event.srcElement.scrollTop) { //处理向

墨蓝/ 2021年11月16日 14:32/ 0 赞/ 998 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 662 阅读