解决浏览器缩放的时候,重新设置滚动条的位置,使页面滚动条固定悬浮在页面底部

项目场景:

浏览器调试页面兼容页面时,缩放页面宽度,整体超出时滚动条出现在页面最底部,不是悬浮在页面下面,只有滚动到最底部才出现,需要的是悬浮在页面底部,不是滚动到最下面才出现


解决方案:

在引入页面组件或者最外部div,添加类名
然后在mounted的时候监听resize

methods: {
    setScrollBar() {
      this.$nextTick(function () {
        var div = document.querySelector(".overall");
        div.style.height = window.innerHeight - 10 + "px";
        console.log("mounted: ", div);
        console.log("mounted: ", window.innerHeight);
      });
    },
  },
  mounted: function () {
    this.setScrollBar();
    // 浏览器缩放
    window.addEventListener("resize", this.setScrollBar);
  },

这样就实现了,缩放浏览器时,滚动轴一直固定悬浮在页面底部拖动
在这里插入图片描述

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-12 16:56:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-12 16:56:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-06-12 16:56:02       82 阅读
  4. Python语言-面向对象

    2024-06-12 16:56:02       91 阅读

热门阅读

  1. 时间复杂度、空间复杂度,这里一次讲清楚

    2024-06-12 16:56:02       29 阅读
  2. 数智化招采平台多层级多租户能力的价值

    2024-06-12 16:56:02       26 阅读
  3. node设置镜像源详细教程

    2024-06-12 16:56:02       25 阅读
  4. 【使用ObjectSizeCalculator计算对象内存大小】

    2024-06-12 16:56:02       27 阅读
  5. Android常见内存泄漏场景总结

    2024-06-12 16:56:02       30 阅读
  6. SQL主键回显

    2024-06-12 16:56:02       25 阅读
  7. 旅游卡免费旅游的使用条件有哪些?

    2024-06-12 16:56:02       29 阅读
  8. 某旅游小镇定岗定编项目成功案例纪实

    2024-06-12 16:56:02       27 阅读
  9. LeetCode-day07-312. 戳气球

    2024-06-12 16:56:02       26 阅读