时间戳

首页 > 解决方案 > 如何防止滚动减小块的宽度？

html - 如何防止滚动减小块的宽度？

问题描述

我有一个小脚本，它使用块类和容器容器的文本添加块，但是当有很多块时，会出现一个滚动条并减小块的宽度 - 我怎样才能避免这种宽度变化

<!DOCTYPE html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.global.prod.min.js"></script>
</head>

<body>
  <div id="app" class="container">
    <div v-for="i in messages" :key="i" class="block">
      {{ i }}
    </div>
  </div>


</body>
<script>
  Vue.createApp({
    data: () => ({
      messages: [],
    }),

    mounted() {
      setInterval(
        function () {
          this.messages.push(Math.random().toString(32).slice(2));
        }.bind(this)
        , 100)
    },
  }).mount('#app');

</script>
<style>
  .container {
    background: yellow;
    height: 50vh;
    width: 5vw;
    overflow-x: hidden;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .container::-webkit-scrollbar {
    width: 5vmin;
    height: 100%;
    background-color: black;
  }

  .container::-webkit-scrollbar-thumb {
    background: red;
  }

  .block {
    background: green;
    width: 5vw;

  }
</style>

</html>

可以减小块的宽度 - 例如，当滚动出现时，居中文本的位移会很明显。我可以做一个像 position: absolute ...

标签： htmlcss

解决方案

简短的回答：你不能。没有本地方法可以禁用滚动消耗空间。

长答案和解决方法：只需再添加一个包装器overflow: hidden，使内部容器比包装器大 17px（17px 是 Chrome、Windows 上的默认滚动条宽度。如果您愿意，可以使用例如 20px），将项目宽度设置为相等到包装器的宽度，所以当内部增长时 - 滚动会出现但会被隐藏。

请记住，这是一个糟糕的解决方案，因为您正在破坏默认的浏览器 UX，并且您的用户不会理解该块是可滚动的。因此，最好按照我之前描述的步骤添加一个虚拟滚动条，该滚动条至少会在悬停时出现。你可以检查它在流行的假滚动条插件中是如何工作的，例如这个。你也可以在你的应用程序中使用这些插件之一

推荐阅读