专栏首页前端学习笔记元素滚动 scroll 系列

元素滚动 scroll 系列

1. scroll 概述

scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

2. 页面被卷去的头部

如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

3.案例:仿淘宝固定右侧侧边栏

  1. 原先侧边栏是绝对定位
  2. 当页面滚动到一定位置,侧边栏改为固定定位
  3. 页面继续滚动,会让 返回顶部显示出来

4.案例分析:

  1. 需要用到页面滚动事件 scroll 因为是页面滚动,所以事件源是document
  2. 滚动到某个位置,就是判断页面被卷去的上部值。
  3. 页面被卷去的头部:可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset
  4. 注意,元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
  5. 其实这个值 可以通过盒子的 offsetTop可以得到,如果大于等于这个值,就可以让盒子固定定位了
  //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
            // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子,就显示 goback模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
​
        })

5.页面被卷去的头部兼容性解决方案

需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:

  1. 声明了 DTD,使用 document.documentElement.scrollTop
  2. 未声明 DTD,使用 document.body.scrollTop
  3. 新方法 window.pageYOffset和 window.pageXOffset,IE9 开始支持
function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的时候  getScroll().left
​

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 常用的键盘事件

    清出于兰
  • 正则表达式中的特殊字符

    一个正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab*c/ 。其中特殊字符也被称为元字符,在正则表达式中是具有特殊意...

    清出于兰
  • Node.js异步编程

    如果异步API后面代码的执行依赖当前异步API的执行结果,但实际上后续代码在执行的时候异步API还没有 返回结果,这个问题要怎么解决呢?

    清出于兰
  • 元素滚动 scroll 系列

    scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

    星辰_大海
  • 微信小程序|基本页面设置

    1 最近几年微信小程序特别的火,快捷容易不需要下载所以不占内存,给我们带来方便。支付,小游戏,应用等很多地方都需要小程序。其实小程序的开发和网页制作基本一样,都...

    算法与编程之美
  • 干货丨JS 经典实例收集整理

    一、跨浏览器事件 跨浏览器添加事件 //跨浏览器添加事件    function addEvent(obj,type,fn){        if(obj.a...

    腾讯NEXT学位
  • 基于微信小程序的公众号设计

    1 最近几年微信小程序特别的火,快捷容易不需要下载所以不占内存,给我们带来方便。支付,小游戏,应用等很多地方都需要小程序。其实小程序的开发和网页制作基本一样,都...

    基于SSM毕设代做
  • javaScript的常见document对象

    对象属性 document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 docume...

    botkenni
  • Document对象

    Document接口表示任何在浏览器中载入的网页,并作为网页内容的入口,也就是DOM树。DOM树包含了像<body>、<div>这样的元素,以及大量其他元素。D...

    WindrunnerMax
  • 2020-10-04

    用户1252670

扫码关注云+社区

领取腾讯云代金券