HTML-如何防止滚动减少块的宽度？-堆栈溢出

顺晟科技

2022-10-18 12:14:17

196

我有一个小脚本，它用Block类和Container容器的文本添加块，但是当有很多块时，会出现一个滚动条并减少块的宽度

-我如何避免这种宽度变化？

<代码><；！文档类型HTML>；<；头部>；<；script SRC=“ https：//cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.global.prod.min.js ”>；<；/script>；<；/标题>；<；身体>；<；DIV ID=“ app ” Class=“ container ”>；<；DIV V-for=“ I in messages ”：key=“ I ” Class=“ block ”>；{{I}}<；/DIV>；<；/DIV>；<；/正文>；<；脚本>；Vue.CreateApp（{数据：（）=>；({消息：[]，}),已装载（）{设置间隔（函数（）{this.messages.push（math.random（）.ToString（32）.slice（2））；}.bind（this）, 100)},}）.mount（'#app '）；<；/脚本>；<；样式>；.容器{背景：黄色；高度：50VH；宽度：5VW；Overflow-X：隐藏；Overflow-Y：自动；显示：Flex；Flex-Direction：列；align-items：居中；}.container：-webkit-scrollbar{宽度：5Vmin；高度：100%；背景色：黑色；}.container：-webkit-scrollbar-thumb{背景：红色；}.块{背景：绿色；宽度：5VW；}<；/样式>；<；/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>再添加一个包装器，使内部容器比包装器大17px（17px是Chrome，Windows上的默认滚动条宽度）。你可以使用例如20px（如果你想），设置项目宽度等于宽度的包装，所以当内部增长-滚动将出现，但将被隐藏。

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

中使用其中的一个插件。

上一篇：HTML-通过JavaScript获下一篇：html网页制作代码大全 HTML-

网站建设

Html

HTML-如何防止滚动减少块的宽度？-堆栈溢出