如何在添加绝对 属性 后停止我的页面滚动

Question

我已经在这个问题上停留了很长一段时间了。我正在尝试制作一个响应式仪表板，在特定屏幕尺寸下，侧面导航栏将被隐藏，您可以使用按钮将其切换回来。我的屏幕主要内容有它的 overflow: hidden，所以它是屏幕上唯一的可滚动区域，但是一旦在小屏幕上添加了侧面板，我就会在页面底部获得额外的区域。

我怎样才能阻止它发生

Link 实施：https://codesandbox.io/s/keen-hertz-zr2h8?resolutionWidth=787&resolutionHeight=675&file=/src/App.vue

代码：

<template>
  <div>
    <div class="w-full absolute">
      <!-- TOP Navigation starts -->

      <nav
        class="h-16 flex items-center border-b-2 border-collGray-100 lg:items-stretch justify-end lg:justify-between bg-black relative z-50"
      >
        <p class="text-white">TOP NAVIGATION</p>
      </nav>
      <!-- TOP Navigation ends -->
    </div>
    <!-- Sidebar FULL SCREEN starts -->
    <div
      class="flex flex-no-wrap h-screen bg-coolGray-200 pt-16 overflow-hidden"
    >
      <div
        class="w-64 relative bg-green-500 shadow flex-col justify-between hidden lg:flex pb-12"
      >
        <div class="px-8">
          <ul class="mt-12">
            <li
              class="flex w-full text-blue-900 cursor-pointer items-center mb-6 hover:text-red-500"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-end">
                <span class="text-sm">Item 1</span>
              </div>
            </li>

            <li
              class="flex w-full text-blue-900 hover:text-red-500 cursor-pointer items-center mb-6"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-center">
                <span class="text-sm">Item 2</span>
              </div>
            </li>

            <li
              class="flex w-full text-blue-900 hover:text-red-500 cursor-pointer items-center mb-6"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-center">
                <span class="text-sm">Item 3</span>
              </div>
            </li>

            <li
              class="flex w-full text-blue-900 hover:text-red-500 cursor-pointer items-center mb-6"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-center">
                <span class="text-sm">Item 4</span>
              </div>
            </li>
            <li
              class="flex w-full text-blue-900 hover:text-red-500 cursor-pointer items-center mb-6"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-center">
                <span class="text-sm">Item 5</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- Sidebar FULL SCREEN ends -->
      <!-- Collapse Start-->
      <div
        class="z-40 absolute top-0 lg:hidden transition duration-150 ease-in-out"
        id="mobile-nav"
      >
        <div
          id="openSideBar"
          class="h-10 w-10 bg-green-500 absolute right-0 mt-16 -mr-10 flex items-center shadow rounded-tr rounded-br justify-center cursor-pointer"
          @click="sidebarHandler(true)"
        >
          <span
            class="material-icons text-red-500"
            :class="{ 'transform rotate-180': moved }"
          >
            >
          </span>
        </div>

        <div class="w-64 relative bg-green-500 shadow h-screen">
          <div class="px-8">
            <ul class="mt-12">
              <li
                class="flex w-full text-red-500 cursor-pointer items-center mb-6 hover:text-darkGrey"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-end">
                  <span class="text-sm">Item 1</span>
                </div>
              </li>

              <li
                class="flex w-full text-red-500 hover:text-darkGrey cursor-pointer items-center mb-6"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm">Item 2</span>
                </div>
              </li>

              <li
                class="flex w-full text-red-500 hover:text-darkGrey cursor-pointer items-center mb-6"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm">Item 3</span>
                </div>
              </li>

              <li
                class="flex w-full text-red-500 hover:text-darkGrey cursor-pointer items-center mb-6"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm">Item 4</span>
                </div>
              </li>
              <li
                class="flex w-full text-red-500 hover:text-darkGrey cursor-pointer items-center mb-6"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm">Item 5</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Collapse End-->
      <!-- Content Start -->

      <div class="mx-auto bg-gray-300 h-full py-2 w-full px-2">
        <div
          class="w-full h-full border-2 border-red-900 bg-gray-600 text-red-900 text-red-500 rounded-lg shadow-sm overflow-scroll overflow-x-hidden"
        >
          <div>
            <ul>
              <li v-for="index in 100" :key="index">
                <p>Item: {{ index }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Content END -->
    </div>
  </div>
</template>

脚本：

<script>
export default {
  data() {
    return {
      moved: false,
    };
  },
  methods: {
    sidebarHandler() {
      var sideBar = document.getElementById("mobile-nav");
      sideBar.style.transform = "translateX(-260px)";
      if (this.moved) {
        sideBar.style.transform = "translateX(0px)";
        this.moved = false;
      } else {
        sideBar.style.transform = "translateX(-260px)";
        this.moved = true;
      }
    },
  },
  watch: {
    $route() {
      if (!this.moved) {
        this.sidebarHandler();
      }
    },
  },
};
</script>

Answer 1

你需要你的侧边栏比屏幕小，这样你就不会有额外的内容滚动。

将 class h-screen 添加到 id="mobile-nav"，从内部容器（绿色背景）中删除 h-screen class 并将样式 height: calc(100vh - 48px); 添加到这个容器。