tonglearning 2022-01-22 17:43 采纳率: 100%
浏览 40
已结题

用jQuery监听页面滚动时页面宽度变小

想要实现类似淘宝搜索框的下滑固定
于是对窗体的下滑距离进行监控
简化代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var bool1=true;
            $(window).scroll(function () {
                var roll = document.documentElement.scrollTop;
                if (roll > 400 && bool1) {
                    alert("下滑距离超过400px");
                    bool1 = false;
                }
                if (roll < 400 && !bool1) {
                    alert("已经回到400px以上");
                    bool1 = 1;
                }
            })
        })
    </script>
</head>
<body>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>

</body>
</html>

运行如下

img

此时下方出现滚动条,浏览器的缩放比例宽为1920无变化
F12查看body的宽变为1903px

img

尝试过:
1.在meta 更改视口宽度,无用
2.更改body标签的宽度(body标签的宽度修改成功,但浏览器呈现效果不变),无用
3.切换浏览器,无用

因此我的页面布局乱了,下面那个滚动条着实碍眼,希望能得到解决
请进行批评与指正,万分感谢

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-01-22 18:05
    关注

    把div的宽度去掉,div块级元素,自动占满一行,设置宽度后由于出现垂直滚动条会导致可视宽度变小,所以body变为1903,而div是1920超出body宽度就会出现水平滚动条了

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月13日
  • 已采纳回答 2月5日
  • 创建了问题 1月22日

悬赏问题

  • ¥15 想请教大家关于机器学习的问题
  • ¥15 虚幻UE保存Actor位置失败
  • ¥15 多个.nii合并为.nii.gz格式
  • ¥50 现在需要统计2023年全年 “签收时间(qssj)” 到 “提交时间(tjsj)” 小于半小时的业务量,但是要排除掉周末的时间,同时还要排除中午休息的时间。
  • ¥50 opencv模板匹配为何图像差别大仍然匹配数值高?
  • ¥15 如何成功完成主菜单和分菜单的代码编程C++
  • ¥15 怎样采集或者其它途径拿到全国最新个体工商户数据
  • ¥20 我是一名大学生,想学习java是自学还是报培训班呢
  • ¥15 pycharm该如何爬取网易云歌曲下的评论?
  • ¥15 java调用sap webservice问题