jq获取滚动距离，窗口的大小数值等

最新推荐文章于 2022-11-06 08:13:21 发布

梦的方向!

最新推荐文章于 2022-11-06 08:13:21 发布

阅读量575

点赞数

分类专栏：常用的js方法文章标签： window css js html javascript

本文链接：https://blog.csdn.net/qq_45541930/article/details/111253978

版权

常用的js方法专栏收录该内容

14 篇文章 1 订阅

订阅专栏

关于浏览器窗口的位置

scrollTop获取，设置滚动条距离顶部的高度，resize拖动窗口大小，offset取到距离顶，左边的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">点击增大</button>
    <button id="btn2">打印信息</button>
    
    <div class="box" 
    style="display: none; width: 200px;
     height: 200px; border: 1px solid springgreen;margin-top: 10px;
     margin-left: 10px;"></div>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     
     <br>
     <br>
     <br>
     <br>
     
     <br>
     <br>
     <br>
     <br>
     
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <button id="btn3">打印滚动条距离顶部的高度</button>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     
     <br>
     <br>
     <br>
     <br>
     
     <br>
     <br>
     <br>
     <br>
    <script src="./css/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            $(window).resize(function () {
                // let resize = $(this)
                let box_dis_wid = $(window).width();
                console.log('浏览器的宽度' + box_dis_wid);
                console.log('浏览器的高度' + $(window).height());
                if(box_dis_wid <= 800) {
                    $('.box').fadeIn(500);
                } else {
                    $('.box').fadeOut(500)
                }
            });
            $('#btn1').on('click', function () {
                $('.box').height(function (n, c) {
                    return c + 10;
                })
            });
            $('#btn2').on('click', function () {
                console.log('盒子的高度' + $('.box').height());
                console.log('盒子的宽度' + $('.box').width());

                console.log('盒子内的宽度' + $('.box').innerWidth());
                console.log('盒子到顶部和左侧的距离' + $('.box').offset().left + '---' +$('.box').offset().top);
                //相对滚动条顶部的偏移,如果有多个滚动条需要根据需求获取对应滚动条
                console.log('滚动的高度' + $(window).scrollTop() + 'px');
                $(window).scrollTop(300);
            })
        })
    </script>
</body>
</html>

梦的方向!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq获取滚动距离，窗口的大小数值等

关于浏览器窗口的位置scrollTop获取，设置滚动条距离顶部的高度，resize拖动窗口大小，offset取到距离顶，左边的距离<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫

专栏目录