zoukankan      html  css  js  c++  java
  • js 原生滚动的实现

    <template>
        <div>
            <ul class="content">
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
                <li>分类列表</li>
            </ul>
        </div>
    </template>
    <script>
    export default {
        name: 'Category'
    }
    </script>
    <style scoped>
    .content { /*原生滚动*/
        height: 150px;
        background: red;
        overflow: hidden;
        overflow-y: scroll;
    }
    </style>

    原生滚动的实现,需要给最外层的div一个固定的高度height: 150px;,然后设置超出部分隐藏,也就是overflow: hidden;然后设置y轴方向的滚动overflow-y: scroll,就这么简单

    不积跬步无以至千里
  • 相关阅读:
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日博客
    每日博客
    结对作业之全国疫情统计可视化地图
    每日博客
  • 原文地址:https://www.cnblogs.com/lyt0207/p/12100829.html
Copyright © 2011-2022 走看看