vue 滚动条监听和设置

967 阅读1分钟

监听滚动条

  mounted() {
    window.addEventListener("scroll", this.menu);
    this.$once("hook:destroyed", () => {
      window.removeEventListener("scroll", this.menu, true);
    });
  },
  methods: {
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    //设置
    goScrollTop() {
      window.scrollTo(0, 0);
    },
  }

监听div的滚动条 触底

        <div class="agreement-popup-box" ref="agreementPopupBox">
          <p>
            请您务必仔细阅读以下“用户协议”、“用户隐私政策”等内容,并审慎点击同意;如您点击同意,则表示您充分理解并同意协议条款内容。
            若您公开发布、上传的信息中涉及儿童个人信息的,请您务必再发布前、上传前征得儿童监护人的同意。
            在您使用该业务功能时,我们的app可能会向您申请下列与个人信息相关的系统权限:
          </p>
          <p>
            请您务必仔细阅读以下“用户协议”、“用户隐私政策”等内容,并审慎点击同意;如您点击同意,则表示您充分理解并同意协议条款内容。
            若您公开发布、上传的信息中涉及儿童个人信息的,请您务必再发布前、上传前征得儿童监护人的同意。
            在您使用该业务功能时,我们的app可能会向您申请下列与个人信息相关的系统权限:
          </p>
        </div>
        
   mounted() {
    //   监听用户协议及隐私政策 弹框 的滚动条
    this.$refs.agreementPopupBox.addEventListener("scroll", this.scrool);
    this.$once("hook:beforeDestroy", () => {
      this.$refs.agreementPopupBox.removeEventListener(
        "scroll",
        this.scrool,
        true
      );
    });
  },
  methods: {
      scrool() {
          let el = this.$refs.agreementPopupBox;
          let offsetHeight = el.offsetHeight;
          let scrollTop = el.scrollTop;
          let scrollHeight = el.scrollHeight;
          if (offsetHeight + scrollTop - scrollHeight >= -1) {
              //触底
            this.isscrollBottom = true;
          }
        },
  }