时间戳

首页 > 解决方案 > 如何禁用垂直滚动并在页面的当前位置而不是页面顶部呈现模式？

html - 如何禁用垂直滚动并在页面的当前位置而不是页面顶部呈现模式？

问题描述

这是我的单文件 Vue 组件，它有一个模态。

<template>
  <div>
    <div class="container">      
      <div class="sidebar">
        <button class="sidebar__gradient-button" @click="setModalVisible(true)" >Open Modal</button>
      </div>
    </div>

    <!-- Modal -->
    <div v-if="modalVisible" class="modal">
      <div class="modal__card">
        <div class="modal__card__container">
          ...
        </div>
        <div class="modal__close-button" @click="setModalVisible(false)">×</div>
      </div>
    </div>
    <!-- Modal -->

    <!-- Modal Overlay -->
    <div v-if="modalVisible" class="overlay" />
    <!-- Modal Overlay -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false
    };
  },
  methods: {
    setModalVisible: function(val) {
      console.log(val);
      return (this.modalVisible = val);
    }
  }
};
</script>

<style lang="scss">
@import "../../sass/app.scss";
</style>

在较小的屏幕上，模式打开按钮不在页面顶部，但是，模式和覆盖呈现在页面顶部。

我想做两件事：

  1. 禁用垂直滚动
  2. 在页面上的当前位置渲染模式和覆盖（我不想将滚动捕捉到顶部，我是反 jQuery :D）

这是 Sass 中模态的样式：

.modal {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 130px;
    @media #{$breakpoint-sm} {
        margin-top: 0;
        align-items: center;
        @media #{$breakpoint-md} {
        }
    }
}

.modal__card {
    z-index: 1000;
    height: 272px;
    width: 355px;
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5);
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    @media #{$breakpoint-sm} {
        height: 310px;
        width: 570px;
        @media #{$breakpoint-md} {
        }
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #262626;
    opacity: 0.8;
    mix-blend-mode: normal;
}

请协助。我想“顶部”属性需要以某种方式动态设置。感谢您的时间。

标签： htmlcsssassvuejs2vue-component

解决方案

您可以在模态打开时在您的身体上添加溢出：隐藏和填充，以使用此功能替换滚动条宽度

function getScrollbarWidth() {
  return window.innerWidth - document.documentElement.clientWidth;
}

推荐阅读