zoukankan      html  css  js  c++  java
  • 元素滚动 scroll 系列

    1. scroll 概述

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

     

    2. 页面被卷去的头部

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

     

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

    1. 原先侧边栏是绝对定位

    2. 当页面滚动到一定位置,侧边栏改为固定定位

    3. 页面继续滚动,会让 返回顶部显示出来

    案例分析:

    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 .当我们页面被卷去的头部大于等于了 bannerTop 此时 侧边栏就要改为固定定位
               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';
              }

          })

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

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

    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

    5. 三大系列总结

    他们主要用法:

    1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop

    2.client经常用于获取元素大小  clientWidth clientHeight

    3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft  

    4.注意页面滚动的距离通过 window.pageXOffset  获得

    星辰ꦿ.大海
  • 相关阅读:
    Leetcode 538. Convert BST to Greater Tree
    Leetcode 530. Minimum Absolute Difference in BST
    Leetcode 501. Find Mode in Binary Search Tree
    Leetcode 437. Path Sum III
    Leetcode 404. Sum of Left Leaves
    Leetcode 257. Binary Tree Paths
    Leetcode 235. Lowest Common Ancestor of a Binary Search Tree
    Leetcode 226. Invert Binary Tree
    Leetcode 112. Path Sum
    Leetcode 111. Minimum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/xc-dh/p/13748879.html
Copyright © 2011-2022 走看看