需求:我们想让盒子可以滚动,但又不想看到其滚动条,如何做?
<template> <div style="width: 500px; margin: 0 auto"> <div class="box"> <ul> <li v-for="(item, i) in list" :key="i">{{ item.name }}</li> </ul> </div> <br /> <div class="box2"> <ul> <li v-for="(item, i) in list" :key="i">{{ item.name }}</li> </ul> </div> </div> </template> <script> export default { data() { return { list: [ { name: "zs", value: "123" }, { name: "ls", value: "456" }, { name: "ww", value: "789" }, { name: "ww", value: "789" }, { name: "ww", value: "789" }, { name: "ww", value: "789" }, { name: "ww", value: "789" }, { name: "ww", value: "789" }, { name: "ww", value: "789" }, { name: "ww", value: "789" }, { name: "ww", value: "789" }, ], }; }, }; </script> <style lang="scss" scoped> * { margin: 0; padding: 0; } // 正常有滚动条 .box { width: 300px; border: 1px solid #999; ul { list-style: none; width: 100%; height: 200px; overflow: auto; li { width: 100%; height: 30px; line-height: 30px; border-bottom: 1px solid #ddd; } } } // 隐藏了滚动条 .box2 { overflow: hidden; //关键点1 width: 300px; border: 1px solid #999; ul { list-style: none; width: calc(100% + 17px); //关键点2 height: 200px; overflow: auto; li { width: 100%; height: 30px; line-height: 30px; border-bottom: 1px solid #ddd; } } } </style>