初始效果
代码:
<template>
<div class="scroll">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</template>
<script>
export default {};
</script>
<style lang="css" scoped>
.scroll {
width: 400px;
height: 400px;
background-color: red;
overflow: auto;
}
li {
margin: 50px;
}
</style>
实现效果
方法一:
::-webkit-scrollbar {
width: 0px;
}
方法二:
.scroll::-webkit-scrollbar {
display: none;
}
方法三:
把子元素的滚动条定位到父元素之外,父元素设置 overflow: hidden; 即可
搞定