How to prevent scroll-u from reducing the width of the block?

D

Dutymy2021-07-14 06:37:14

css

Dutymy, 2021-07-14 06:37:14

Hello, I have a small script that adds blocks with text of the block class and a container container, however, when there are a lot of blocks, a scroll bar appears and reduces the width of the blocks - how can such a width shift be avoided

<!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>

The block width is reduced - for example, this is noticeable by the offset of the centered text when a scroll appears.
Can I make scroll like position: absolute...

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexey Dubrovin, 2021-07-14
@alekcena

Not normally.
This is not a solution.
If scrolling bothers you, it's not about it, but about how your code is structured.
Scroll subtracts 20px from viewport