@Dutymy

Как запретить scroll-у уменьшать ширину блока?

Здравствуйте, у меня eсть небольшой скрипт добавляющий блоки с текстом класса block и контейнер container однако когда блоков становится много появляется скрол бар и уменьшает ширину блоков - как можно избежать такого сдвига ширины
<!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...
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ответы на вопрос 1
@alekcena
В попытках обрести навыки и умения
Нормально никак.
Это не решение.
Если вам мешает скролл дело не в нём а в том как устроен ваш код.
Скролл вычитает из зоны просмотра 20px
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы