css解决滚动以及滚动遇到的一些问题

一、滚动原理

滚动原理很简单，用简单话来说就是有一个固定高度的盒子，当盒子的内容超出该盒子范围时，则设置滚动。

二、滚动

<template>
   <div class="pageContent">
        <div class="TreeBox">
            <div class="scrollBox">
                <div v-for="(item, index) in list" :key="index">
                    {{item}}
                </div>
            </div>
        </div>
   </div>
</template>

<script>
export default {
    data() {
        return {
            list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 6]
        }
    },
    created() {},
    methods: {
    }
}
</script>

<style lang="less" scoped>
.TreeBox{
    // 必须加display：flex
    display: flex;
    height:200px;
    width:300px;
    position: relative;
	overflow: hidden;
}
.scrollBox{
    // 隐藏滚动条
    position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
    // y方向滚动
	overflow-x: hidden;
	overflow-y: scroll;
}
// 设置滚动条的样式
::-webkit-scrollbar-track {

  background-color: #d7dde4;

} /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {

  background-color: #d7dde4; 

} /* 滑块颜色 */

::-webkit-scrollbar-button {

  background-color: #d7dde4;

} /* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {

  background-color: #d7dde4;

} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
</style>

 

 

三、注意的点

1.滚动的父级TreeBox必须加display：flex，否则就是有滚动条，但就是不滚动，曾经遇到过这个坑。

2. 父级盒子必须设置固定高度，TreeBox和scrollBox的样式是重点

3.设置隐藏滚动条的原理就是定位滚动条的宽度，隐藏到看不见的位置

4.设置滚动条样式是为了让滚动条更好看，隐藏的话就不必设置了