css 局域滚动内容

最新推荐文章于 2024-10-14 17:33:54 发布

WinterWang0207

最新推荐文章于 2024-10-14 17:33:54 发布

阅读量229

点赞数

分类专栏： css

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果

代码：

<template>
    <div>
      <div class="right-select" style="margin-top:50px;">
         <ul>
                 <li>张三1</li>
                 <li>张三2</li>
                 <li>张三3</li>
                 <li>张三4</li>
                 <li>张三5</li>
                 <li>张三6</li>
                 <li>张三7</li>
                 <li>张三3</li>
                 <li>张三4</li>
                 <li>张三5</li>
                 <li>张三6</li>
                 <li>张三7</li>
         </ul>
</div>
    </div>
</template>

 <script>
export default {

        data() {
            return {
               
            };
        },

        methods: {
       
        }

    }
</script>

<style scoped>
.right-select{
        width: 500px;
        height: 105px;
        overflow-y: scroll;
        border: 1px solid #bbbbbb;
        border-radius: 5px;
        margin-left: 65px;
    }
    .right-select::-webkit-scrollbar {
        width: 12px;
        background-color: #fff;
    }
    .right-select::-webkit-scrollbar-thumb {
        height: 26px;
        background-color: #666;
        border-radius: 50px;
    }

</style>