三大家族-滚动家族-scroll家族/固定导航栏/client家族-元素的可视区域：`clientWidth`、`clientHeight`/响应式布局原理（可视家族）

最新推荐文章于 2022-04-26 10:50:37 发布

喵帕斯_喵太

最新推荐文章于 2022-04-26 10:50:37 发布

阅读量105

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116212725

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-三大家族-滚动家族-scroll家族-`滚动事件：onscroll`

    <style>
        .box {
            width: 200px;
            height: 200px;

            /* 滚动效果 */
            overflow: auto;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="images/slidepic2.jpg" alt="">
    </div>

    <script>
        // 滚动家族：scroll家族
        // 滚动事件：onscroll

        // 给元素box添加一个滚动事件
        let box = document.querySelector('.box')

        box.onscroll = function () {
            // console.log(1)

            // 滚动数据

            // 内容宽高（不变）：元素.scrollWidth || Height
            // console.log(box.scrollWidth, box.scrollHeight)

            // 滚动距离（变化）：元素.scrollLeft || Top
            console.log(box.scrollLeft, box.scrollTop)
        }
    </script>
</body>

注意：
1.内容宽高（不变）：元素.scrollWidth || Height
2.滚动距离（变化）：元素.scrollLeft || Top

在这里插入图片描述

02-三大家族-滚动家族-页面滚动

    <style>
        /* 让页面产生滚动条 */
        body {
            width: 2000px;
            height: 2000px;
        }
    </style>
</head>

<body>
    <script>
        // 页面滚动事件：window.onscroll

        window.onscroll = function () {
            // console.log(1)

            // 获取滚动距离：window没有scrollLeft和scrollTop
            // console.log(scrollLeft, scrollTop)
            // 报错：没有

            // window有自己的属性（存在一定的兼容性）
            // console.log(pageXOffset, pageYOffset)
            // 页面  x方向 || y方向  偏移量

            // 调用兼容处理
            var scrollInfo = getScrollInfo()

            console.log(scrollInfo.scrollLeft, scrollInfo.scrollTop)
        }

        // 兼容处理
        // 谷歌/获取：pageXOffset和pageYOffset
        // IE8（及以下）：document.documentElement.scrollLeft/Top（谷歌也支持）
        // 其他：document.body.scrollLeft/Top

        // 兼容处理：一个一个的试，谁满足用谁
        // 通常会封装函数做兼容

        function getScrollInfo() {
            // 如果考虑兼容：不要使用ES6语法

            var scrollLeft = pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0

            var scrollTop = pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

            // 返回一个对象
            return {
                scrollLeft: scrollLeft,
                scrollTop: scrollTop
            }
        }
    </script>
</body>

注意：
1.获取滚动距离：window没有scrollLeft和scrollTop
2.兼容处理：一个一个的试，谁满足用谁
// 通常会封装函数做兼容

03-三大家族-滚动家族-固定导航栏案例

   <style>
        * {
            margin: 0;
            padding: 0
        }

        /* img {
            vertical-align: top;
        } */

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="top">
        <img id="pic" src="images/top.png" alt="" />
    </div>

    <div class="nav">
        <img src="images/nav.png" alt="" />
    </div>

    <div class="main">
        <img src="images/main.png" alt="" />
    </div>

    <script>

        // 需求：页面滚动一定距离（top的高度），就让导航栏固定；否则不固定

        // 1. 获取相关元素：nav导航栏，top栏，main主体部分
        let nav = document.querySelector('.nav')
        let topPart = nav.previousElementSibling
        let main = nav.nextElementSibling

        // 获取main部分原始的marginTop的值
        let oldMarginTop = parseInt(getComputedStyle(main).marginTop)

        // console.log(topPart.offsetHeight)
        // 当前只有盒子给图片的预留高度：21px

        // 2. 给页面添加滚动事件：window.onscroll
        window.onscroll = function () {
            // 3. 事件处理
            // 3.1 获取滚动高度：pageYOffset
            // console.log(topPart.offsetHeight)
            // 3.2 跟top部分的高度进行比较
            if (pageYOffset > topPart.offsetHeight) {
                // 3.3 超出：导航栏固定；否则不固定
                nav.classList.add('fixed')

                // 导航栏脱标：下面的内容会顶上去
                // 解决方案：让下面的内容增加margin：为nav导航栏的高度
                main.style.marginTop = nav.offsetHeight + oldMarginTop + 'px'
            } else {
                nav.classList.remove('fixed')

                // 当导航栏不固定的时候：清除原来main追加的marginTop部分
                main.style.marginTop = oldMarginTop + 'px'
            }

        }

    </script>
</body>

04-三大家族-可视家族-client家族-获取元素的可视区域：`clientWidth`、`clientHeight`

    <style>
        .box {
            width: 200px;
            height: 200px;

            border: 10px solid red;
            /* 滚动效果 */
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/slidepic2.jpg" alt="">
    </div>

    <script>
        // 获取元素的可视区域：clientWidth、clientHeight
        let box = document.querySelector('.box')

        // 拿到的是静态效果（图片是后加载）
        console.log(box.clientWidth, box.clientHeight)

        box.onscroll = function () {
            // 去除滚动条所占用的宽高
            console.log(box.clientWidth, box.clientHeight)

            // 可视边距
            console.log(box.clientLeft, box.clientTop)
        }
    </script>
</body>

注意：
1.如果在事件外获取，拿到的是静态效果，因为图片是后加载的。
2.获取元素的可视区域：clientWidth、clientHeight
3.如果在事件里面输入就是：去除滚动条所占用的宽高

15-三大家族-可视家族-响应式布局原理

    <style>
        .box {
            width: 100px;
            height: 100px;
        }

        .lx {
            background-color: red;
        }

        .sm {
            background-color: green;
        }

        .xs {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box lx"></div>

    <script>
        // 需求：PC端：红色；平板：绿色；移动端：蓝色
        let box = document.querySelector('.box')

        // 获取页面的可视区域：window.onresize
        window.onresize = function () {
            // console.log(1)

            // 获取可视区域：window下的大小
            // innerWidth,innerHeight
            console.log(innerWidth, innerHeight)

            // 响应式布局
            if (innerWidth >= 1200) {
                // PC端：干掉sm和xs，保留
                box.classList.remove('sm')
                box.classList.remove('xs')
                box.classList.add('lx')
            } else if (innerWidth >= 768) {
                box.classList.remove('lx')
                box.classList.remove('xs')
                box.classList.add('sm')
            } else {
                box.classList.remove('sm')
                box.classList.remove('lx')
                box.classList.add('xs')
            }

            // 判定横竖屏
            if (innerWidth > innerHeight) {
                box.innerText = '横屏'
            } else {
                box.innerText = '竖屏'
            }
        }
    </script>
</body>