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,就这么简单

    不积跬步无以至千里
  • 相关阅读:
    「应用界面美化」DevExpress Winform数据网格如何绑定数据
    使用Northwind数据库的 .NET Core应用你了解多少?
    如何将现有的WinForms / WPF项目转换为.NET Core?这里有你想要的答案!
    php 微信分享
    连表查询取最新时间
    filesort
    项目执行shell脚本
    redis做消息队列
    es pdf 文档
    vim 常用工具
  • 原文地址:https://www.cnblogs.com/lyt0207/p/12100829.html
Copyright © 2011-2022 走看看