scroll 方法获取滚轴距离顶部高度02 滚动触底加载视图监控下拉刷新

web修理工

已于 2022-06-12 11:10:08 修改

阅读量654

点赞数

分类专栏： JavaScript 文章标签： javascript css3 html5

于 2020-11-11 14:12:13 首次发布

原文链接：https://www.jb51.net/article/191419.htm

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:border="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
 
        * {
            padding: 0;
            margin: 0;
        }
 
        .left i {
            display: block;
            margin-top: 10px;
            margin-left: 20px;
            width: 30px;
            height: 30px;
            background: no-repeat;
            background-size: 30px 30px;
        }
        .right i {
            display: block;
            margin-top: 10px;
            margin-right: 20px;
            width: 30px;
            height: 30px;
            background: no-repeat;
            background-size: 30px 30px;
        }
 
        .span1{
            font-size: 17px;
            font-family: 微软雅黑;
            font-weight: bold;
            color: white;
            margin-left: 25px;
        }
 
        .span2{
            color: black;
            font-size: 13px;
            background-color: yellow;
            margin-left: 25px;
            padding: 2px;
        }
 
        .span3{
            color: black;
            font-size: 13px;
            background-color: yellow;
            padding: 2px;
        }
 
        .span4{
            color:yellow;
            background-color: gray;
            font-size: 13px;
            padding: 2px;
        }
 
        .span5{
            color:yellow;
            background-color: gray;
            font-size: 13px;
            padding: 2px;
        }
        .span6{
            color:gray;
            font-size: 14px;
            padding-top: 1px;
            margin-left: 25px;
        }
        .span7{
            font-size: 16px;
            color: white;
            font-family: 微软雅黑;
            font-weight: bold;
            float:right;
            padding-right: 18px;
        }
 
        ul li,ol li {
            list-style: none;
        }
        .list li {
            float: left;
            margin-right: 10px;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background-color: rgba(0,0,0,0.5);
            cursor: pointer;
        }
        .list .current {
            background-color: #fff;
        }
        .picture li {
            position: absolute;
            width: 100%;
            height: 150px;
        }
        img {
            width: 100%;
            height: 100%;
        }
        #cn{
           list-style-type: none;
            line-height: 36px;
            background-color: black;
            text-align: center;
            width: 100%;
        }
        .cn1{
            display: inline;
        }
        .cn1 a{
            text-decoration: none;
            color:white;
            font-size: 15px;
            margin: 0;
            padding: 9px 7%;
            word-spacing: 4px;
        }
        .menu {
            display: block;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            color: #000000;
            padding-top: 5px;
            border-top: 1px solid #000000;
            background-color: #000000;
        }
 
        .subMenu {
            width: 20%;
            cursor: pointer;
            margin:0 auto;
            text-align: center;
        }
 
        .menu_name {
            height: 12px;
            color: white;
            font-size: 12px;
            margin-top: 8px;
            width: 100%;
            line-height: 12px;
        }
 
        img.menu_img {
            height: 18px;
            width: 18px;
        }
 
        img {
            vertical-align: middle;
            border: 0;
        }
 
        #cp{
            background-color: black;
        }
 
        #cqa{
           background-color: black;
            line-height: 24px;
            padding-bottom: 17px;
            padding-top: 17px;
        }
 
        #cq{
            background-color: black;
        }
 
        .active {
            color: #FFA129;
        }
 
        .text-center {
            text-align: center
        }
        .jd-banner {
            position: relative;
            overflow: hidden;
            height: 150px;
            width: 100%;
        }
        .jd-banner .previousBtn {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: rgba(210, 210, 210, 0.4);
            border-radius: 50%;
            transform: translateY(-50%);
            top: 50%;
            left: 12px;
        }
        .jd-banner .previousBtn span {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-position: -22px 0px;
        }
        .jd-banner .previousBtn:hover {
            border: 1px solid #fff;
            background-color: transparent;
        }
        .jd-banner .nextBtn {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: rgba(210, 210, 210, 0.4);
            border-radius: 50%;
            transform: translateY(-50%);
            top: 50%;
            right: 12px;
        }
        .jd-banner .nextBtn span {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-position: -22px 0px;
            transform: scaleX(-1);/*镜像*/
        }
        .jd-banner .nextBtn:hover {
            border: 1px solid #fff;
            background-color: transparent;
        }
        .jd-banner ul {
            width: 1000%;
            -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
        }
        .jd-banner ul li {
            width: 10%;
            float: left;
        }
        .jd-banner ul li img {
            width: 100%;
            height: 150px;
        }
        .jd-banner ol {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
        }
        .jd-banner ol li {
            float: left;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            border: 1px solid #ff0000;
            margin: 0 4px;
        }
        .jd-banner ol .current {
            background-color: #ff0000;
        }
    </style>
</head>
<body style="background-color: black">
<div class="main" id="main" style="background-color: black">
    <!-- 轮播图 -->
    <div class="jd-banner">
        <ul class="clearfix">
            <li><a href="#"><img src="./images/li4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li1.jpg" alt=""></a></li>
        </ul>
        <div class="previousBtn">
            <!--jd-sprites：添加的精灵图图标，可自行添加箭头-->
            <span class="jd-sprites"></span>
        </div>
        <div class="nextBtn">
            <span class="jd-sprites"></span>
        </div>
        <!--轮播点-->
        <ol>
            <li class="current"></li>
            <li > </li>
            <li ></li>
            <li ></li>
        </ol>
    </div>
    <script type="text/javascript">
        ; (function bannerToggle() {
            var banner = document.querySelector('.jd-banner')
            var ul = banner.querySelector('.jd-banner ul'); //获取ul
            var olLis = document.querySelectorAll('.jd-banner ol li')//获取小圆点
            var previousBtn = document.querySelector('.previousBtn')
            var nextBtn = document.querySelector('.nextBtn')
 
            var length = ul.children.length
            // 前面有张假图片，因此index=1
            var index = 1
            var width = banner.offsetWidth
 
            nextBtn.onclick = function () {
                nextImg()
            }
            previousBtn.onclick = function () {
                previousImg()
            }
            /* 切换到下一张图 */
            function nextImg() {
                index++
                addAnimation()
                moveImg(-index * width)
            }
            /* 切换到上一张图 */
            function previousImg() {
                index--
                addAnimation()
                moveImg(-index * width)
            }
            /*transitionend事件：过渡完成后触发 */
            ul.addEventListener('transitionend', function () {
                // 往左跑的判断, 当抵达最后一张假图时, 需要瞬间跳到第一张真图的位置
                if (index >= length - 1) {
                    index = 1
                    removeAnimation()
                    moveImg(-index * width)
                }
                // 往右跑的判断, 当抵达第一张假图的时候, 应该瞬间跳转到最后一张真图(图8的位置)
                if (index <= 0) {
                    index = length - 2
                    removeAnimation()
                    moveImg(-index * width)
                }
                location()
            })
 
            /**封装的一些小方法 */
            /*排他思维,添加小圆点*/
            function location() {
                olLis.forEach(function (item, index) {
                    item.classList.remove('current')
                })
                olLis[index - 1].classList.add('current')
            }
            /*图片移动 */
            function moveImg(x) {
                ul.style.transform = 'translateX(' + x + 'px)'
            }
            /*移除动画 */
            function removeAnimation() {
                ul.style.transition = 'none'//移除过渡
            }
            /*添加动画 */
            function addAnimation() {
                ul.style.transition = 'all .4s'//添加过渡
            }
            /*自动播放 */
            var timerId = null
            function autoPlay() {
                timerId = setInterval(nextImg, 3000)
            }
            autoPlay()
            /*鼠标移入停止播放 */
            banner.onmouseenter = function () {
                clearInterval(timerId)
            }
            /*鼠标移出开始播放 */
            banner.onmouseleave = function () {
                autoPlay()
            }
 
 
            // 如果屏幕大小变换了, width 需要动态更新
            // resize: 屏幕大小改变时触发
            window.addEventListener("resize", function () {
                // 重新获取 li 的宽度即可
                width = banner.offsetWidth;
            })
        })()
    </script>
<div id="cn">
    <li class="cn1"><a>数字藏品</a></li>
    <li class="cn1"><a>发售计划</a></li>
    <li class="cn1"><a>积分空投</a></li>
</div>
<a href="./li1.html">
    <div id="co" style="overflow:hidden;background-color: black">
    <div id="cp" th:each="cangpin,cangpinStat:${cangpinlist}">
        <div id="cq" width="80%" height="auto">
        <img th:src="'/images/'+${cangpin.path2}">
        </div>
        <div id="cqa">
        <nobr class="span1" th:text="${cangpin.cangpinname}"></nobr><br>
        <nobr class="span2" th:text="${cangpin.type2}"></nobr>
        <nobr class="span3">限量</nobr>
        <nobr class="span4" th:text="${cangpin.totalnum}"></nobr>
        <nobr class="span5" th:text="'  '+${cangpin.sys}"></nobr><br>
        <nobr class="span6" th:text="'  '+${cangpin.company}"></nobr>
        <nobr class="span7"  th:text="'  ￥'+${cangpin.xianjia}"></nobr>
        </div>
    </div>
</div>
</a>
    <div id="cr" style="height:100px;background-color:black;text-align: center;color: white;font-size: 16px;font-weight: bold;
font-family: 华文琥珀;margin-top: 10px;margin-bottom: 30px">-更多内容敬请期待-</div>
</div>
<script>
    $(document).ready(function() {
        //添加图片
        $("div .subMenu>img").each(function() {
            var name = $(this).attr("data-imgname");
            var src = "http://www.jq22.com/img/cs/500x300-" + name + ".png"
            //设置img的属性和值。
            $(this).attr("src", src);
        });
 
        //点击事件
        $("div .subMenu").click(function() {
            // 取消当前激活状态
            var $img = $(".active>img");
            //返回被选元素的属性值
            var name = $img.attr("data-imgname");
            var src = "http://www.jq22.com/img/cs/500x300-" + name + ".png";
            $img.attr("src", src);
            $(".active").removeClass("active");
 
            // 添加新状态
            $(this).addClass("active");
            //找到所有 div(subMenu) 的子元素(img)
            $img = $(this).children("img");
            name = $img.attr("data-imgname");
            src = "http://www.jq22.com/img/cs/500x300-" + name + ".png";
            //设置img的属性和值。
            $img.attr("src", src);
 
            //content根据点击按钮加载不同的html
            var page = $(this).attr("data-src");
            if (page) {
                $("#content").load("../html/" + page)
            }
        });
 
        // 自动点击第一个菜单
        $("div .subMenu")[0].click();
    });
 
    /*content高度*/
    function initSize() {
        var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height();
        $("#content").height(height + "px");
    }
</script>
<div id="menu" class="menu">
    <div id="one" class="subMenu text-center"  style="position: fixed;left: 8%">
        <img class="menu_img" src="/images/home.png" width="18px" height="18px">
        <div class="menu_name">首页</div>
    </div>
    <div id="two" class="subMenu text-center" style="position: fixed;left: 41%">
        <img class="menu_img" src="/images/cube.png" width="18px" height="18px">
        <div class="menu_name">藏品</div>
    </div>
    <div id="three" class="subMenu text-center" style="position: fixed;left: 74%">
        <img class="menu_img" src="/images/person.png" width="18px" height="18px">
        <div class="menu_name">我的</div>
    </div>
</div>
<script type="text/javascript">
    var screen=window.outerHeight;
    var msg2 = document.getElementById("menu");
    var msg = document.getElementById("main");
    var msg3=document.getElementById("cr");
    msg.style.height = screen+msg2.offsetHeight+msg3.offsetHeight+'px';
</script>
<script type="text/javascript">
    var a = document.getElementById("cn");
    var b = document.querySelector('.jd-banner');
    function scroll() {
        var d = b.offsetHeight;
        var e=document.documentElement.scrollTop
        console.log("#"+d,e)
        if (e >= d) {
            a.style.position = 'fixed';
            a.style.left = '0';
            a.style.top = '0';
            
        }else{
            a.style.position = 'static';
        }
    }
       document.body.onscroll=scroll
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <main>
        <p class="refreshText"></p>
        <ul id="refreshContainer">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            ...
        </ul>
    </main>
    <script>
        var _element = document.getElementById('refreshContainer'),
            _refreshText = document.querySelector('.refreshText'),
            _startPos = 0,  // 初始的值
            _transitionHeight = 0; // 移动的距离

        _element.addEventListener('touchstart', function (e) {
            _startPos = e.touches[0].pageY; // 记录初始位置
            _element.style.position = 'relative';
            _element.style.transition = 'transform 0s';
        }, false);

        _element.addEventListener('touchmove', function (e) {
            // e.touches[0].pageY 当前位置
            _transitionHeight = e.touches[0].pageY - _startPos; // 记录差值

            if (_transitionHeight > 0 && _transitionHeight < 60) {
                _refreshText.innerText = '下拉刷新';
                _element.style.transform = 'translateY(' + _transitionHeight + 'px)';

                if (_transitionHeight > 55) {
                    _refreshText.innerText = '释放更新';
                }
            }
        }, false);

        _element.addEventListener('touchend', function (e) {
            _element.style.transition = 'transform 0.5s ease 1s';
            _element.style.transform = 'translateY(0px)';
            _refreshText.innerText = '更新中...';
            // todo...

        }, false);
    </script>
</body>

</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            background-color: #ff0;
        }

        .ones {
            position: relative;
            height: 3000px;
            background-color: #f00;
            overflow: scroll;
        }

        #container {
            position: absolute;
            top: 1000px;
        }
    </style>
</head>


<body>
    <div class="header">
        <button onclick="add()">save</button>
    </div>


    <div class="ones">
        <img id="container" index="0" src="1.jpg" alt="">
    </div>


    <script>


        function add() {
            document.getElementById('container').scrollIntoView({
                behavior: "smooth",
                block: "start"
            });
        }

    </script>
</body>

</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>探探scrollIntoView</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            height: 100%;
            background: #fefefe;
        }

        .buttons {
            width: 100%;
            background-color: beige;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 140px;
            align-content: space-around;
        }

        .buttons a {
            display: block;
            width: 30%;
            height: 30px;
            background: #3cbaff;
            color: #fff;
            text-align: center;
            line-height: 30px;
            border-radius: 100px;
            text-decoration: none;
            font-size: 14px;
        }

        .wrapper {
            width: 100%;
            height: calc(100% - 140px);
            background-color: blanchedalmond;
            overflow: scroll;
        }

        .element {
            height: 3000px;
            position: relative;
        }

        .block {
            width: 80%;
            height: 60px;
            background-color: red;
            line-height: 60px;
            text-align: center;
            font-size: 24px;
            font-weight: bolder;
            color: #fff;
            position: absolute;
            top: 1000px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="buttons">
            <a href="javascript:void(0)">1</a>
            <a href="javascript:void(0)">2</a>
            <a href="javascript:void(0)">3</a>
            <a href="javascript:void(0)">4</a>
            <a href="javascript:void(0)">5</a>
            <a href="javascript:void(0)">6</a>
            <a href="javascript:void(0)">7</a>
            <a href="javascript:void(0)">8</a>
            <a href="javascript:void(0)">true</a>
            <a href="javascript:void(0)">false</a>
        </div>
        <div class="wrapper">
            <div class="element">
                <div class="block">
                    Block
                </div>
            </div>
        </div>
    </div>
    <script>
        const options = {
            '2': true,
            '3': {
                behavior: 'auto',
                block: 'start'
            },
            '4': {
                behavior: 'auto',
                block: 'end'
            },
            '5': {
                behavior: 'instant',
                block: 'start'
            },
            '6': {
                behavior: 'instant',
                block: 'end'
            },
            '7': {
                behavior: 'smooth',
                block: 'start'
            },
            '8': {
                behavior: 'smooth',
                block: 'end'
            }
        }
        const as = document.querySelectorAll('a')
        const block = document.querySelector('.block')
        for (let i = 0; i < as.length - 2; i++) {
            const el = as[i]
            el.addEventListener('click', function () {
                console.log(el.textContent, options[el.textContent])
                i === 0 ? block.scrollIntoView() : block.scrollIntoView(options[el.textContent])
            }, false)
        }
        for (let i = as.length - 2; i < as.length; i++) {
            const el = as[i]
            el.addEventListener('click', function () {
                console.log(JSON.parse(el.textContent))
                block.scrollIntoViewIfNeeded(JSON.parse(el.textContent));
            }, false)
        }
    </script>
</body>

</html>




<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
        }

        #root {
            overflow: auto;
            height: 400px;

        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>


<body>



    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div class="one">

    </div>
    <div id="root">
        <img index="0" src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF" alt="">
    </div>
    <div class="one">

    </div>

    <div class="one">
        <div id="root">
            <img index="1" src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF" alt="">
        </div>
    </div>

    <div class="one">
        1
    </div>

    <div class="one">
        1
    </div>

    <div class="one">
        1
    </div>

    <div class="one">
        1
    </div>

    <script>
        // 多个获取
        /**
           * 观察目标元素是否出现到了可视区域
           * @param eles 原生 document 可以多个也可以一个
           * @param callback 当该元素出现在可视区域后触发回调，回调参数就是那个出现在可视区域上的元素
           * @param root 视口元素，该元素的边界盒将作为可视区域， 默认 为整个文档
           */
        function ObserverEleview(eles, callback = (e) => 0, root = document.getElementById('root')) {
            const list = [];
            // 创建一个观察者
            const obs = new IntersectionObserver(([content]) => {
                console.log(content.intersectionRatio, 'content.intersectionRatio', content.target, content)
                // 当该元素出现后触发回调方法
                if (content.intersectionRatio > 0) {
                    obs.unobserve(content.target)
                    callback(content.target, content)
                }
            }, {

            });
            // 开始观察 元素
            for (let ele of list.concat(eles)) {
                console.log(eles, '===eles')
                obs.observe(ele);
            }
        }

        // 使用方法
        ObserverEleview([...document.querySelectorAll("img")], (ele, content) => {
            console.log("该图片出现在视野内了")
        }, document.body)


        // 单个获取
        // var intersectionObserver = new IntersectionObserver(function (entries) {
        //     // If intersectionRatio is 0, the target is out of view
        //     // and we do not need to do anything.
        //     console.log(entries[0], '====entries[0].intersectionRatio')
        //     if (entries[0].intersectionRatio <= 0) {
        //         return
        //     };
        //     console.log('Loaded new items');
        //     if (intersectionObserver) {
        //         intersectionObserver.unobserve(entries[0].target)
        //     }
        // });
        // // start observing
        // intersectionObserver.observe(document.querySelector('img'));


    //     // Watch for intersection events on a specific target Element.
    //     observer.observe(target);  监听

    //     // Stop watching for intersection events on a specific target Element.
    //     observer.unobserve(target); 取消监听

    //     // Stop observing threshold events on all target elements.
    //     observer.disconnect();  注销监听
    //
    // {
    //     root: document.querySelector('.container'), //元素
    //     rootMargin: "500px 0px"                     // 距离
    //     threshold: [0, 0.25, 0.5, 0.75, 1]          // 物体的百分比
    // }


    </script>
</body>

</html>

参考:https://www.cnblogs.com/blackbentel/p/11065611.html
在这里插入图片描述

触底加载


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .odiv {
            width: 80%;
            background: #f00;
            overflow: auto;
            height: 100vh;
        }

        .one {
            height: 2000px;
            background: #ff0;
        }
    </style>
</head>

<body>
    <div class="odiv" onscroll="myScript()">
        <div class="one">
            1
        </div>
    </div>
    <script>
        let one = document.getElementsByClassName('one')[0];
        let odiv = document.getElementsByClassName('odiv')[0];
        console.log('123', odiv);
        console.log(one.offsetHeight);
        console.log(one.offsetTop);
        console.log(one.offsetTop);

        // odiv.onscroll = function () {
        //     console.log('123')
        //     console.log(one.offsetHeight)
        //     console.log(one.offsetTop)
        //     console.log(one.offsetTop)
        // };
        let timer;
        function myScript() {

            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                console.log('======')
                console.log(one.offsetHeight, '===offsetHeight')
                console.log(one.offsetTop, '===offsetTop')
                console.log(one.scrollTop, '===scrollTop')

                console.log('======')
                console.log(odiv.offsetHeight, '===offsetHeight')
                console.log(odiv.offsetTop, '===offsetTop')
                console.log(odiv.scrollTop, '===scrollTop')

                // 容器捐钱高度+容器本身的高度  与内部的高度相比较
                if (odiv.scrollTop + odiv.offsetHeight > odiv.offsetHeight - 50) {
                    console.log('触底加载++')
                }
            }, 1000)

        };


    </script>
</body>

</html>

// html

<div class='popContainer'></div>

// css

div.popContainer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
}

阴影背景层

 <div class="layout" @touchmove.prevent :style="{'display':flag?'block':'none'}" @click="closeAction"></div>

<div class="magnify" v-show="isShow" @click.self="hide" @touchmove.prevent @mousewheel.prevent>
...
</div>

首先，这个div就是整个遮罩组件的根组件，核心就是div上的事件绑定。

@touchmove 是触摸移动事件

@mousewheel 是鼠标滚轮事件

而加了prevent事件后缀，相信大家都知道是阻止默认事件。

当组件在屏幕最上方显示时，触摸移动事件和鼠标滚轮都被阻止了，所以页面不会再滚动。

在网上也看到了很多给body添加事件的解决方法：

function bodyScroll(event){ 
 event.preventDefault(); 
} 

document.body.addEventListener('touchmove',bodyScroll,false);

.goods-area{
 height:8.58rem;
 overflow-x: hidden;  /* 解决左右可以滑动的问题 */
 overflow-y: auto;  /* 解决左右可以滑动的问题 */
 overflow-scrolling: touch; /*兼容性 ios5+、android4+ */
}

mounted () {
 this.$refs.box.addEventListener('scroll', this.onScroll);
},
onScroll () { //onScroll方法放在methods:{}中
 let nScrollHeight = this.$refs.box.scrollHeight; // 滚动距离总长 内部div的高度
 let nScrollTop = this.$refs.box.scrollTop; // 滚动条（点）当前的位置在内部div的高度 里占多少
 let itemHeight = nScrollHeight / (this.items.length); // 可以理解为每一个item的高度
 let scrollLength = itemHeight * (this.items.length - 4); // 默认显示4个item
 this.bottomMaskShow = true;
 if (nScrollTop > (scrollLength -49)) { // 49 这个差值比较灵活，是根据项目中打印出来的item高度和scrollTop实际滚动（出去）的值对比得出的
 this.bottomMaskShow = false;
 } else
 if(nScrollTop <= (scrollLength -49)){ 
 this.bottomMaskShow = true;
 }
}

触底加载

    //   滚动加载
    organizationScroll(e) {
      //   console.log(
      //     e,
      //     "===e",
      //     e.target.scrollHeight,
      //     e.target.scrollTop + e.target.clientHeight + 6
      //   );
      if (timerorigin) {
        clearTimeout(timerorigin);
    }
      timerorigin = setTimeout(() => {
        if (
          e.target.scrollHeight <
          e.target.scrollTop + e.target.clientHeight + 6
        ) {
          if (this.organizationPage >= this.pages) {
            this.$Message.error("已经没有了哦!");
            return;
          }
          this.organizationPage++;
          this.organizationseach(this.organizationName);
        }
      }, 300);
    },

// 滚动的核心代码

  mounted() {
    this.containerHeight = this.$refs.container.clientHeight;
    this.innerHeight = this.$refs.inner.offsetHeight;
    this.$refs.container.addEventListener("scroll", this.initScroll);
  },
  methods: {
    initScroll(e) {
      if (this.loading || this.nomore) return;
      this.innerHeight = this.$refs.inner.offsetHeight;
      let scrollTop = e.target.scrollTop;
      if (scrollTop + this.containerHeight >= this.innerHeight) {
        console.log("-----------------触底了-------------");
        this.$emit("loadBottom");
      }
    },
  },

web修理工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scroll 方法获取滚轴距离顶部高度02 滚动触底加载视图监控下拉刷新

01// html<div class='popContainer'></div>// cssdiv.popContainer{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3);}阴影背景层 <div class="layout" @touchmove.prevent :style="{'display':flag?'b
复制链接

扫一扫