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

    不积跬步无以至千里
  • 相关阅读:
    Sql 行转换列(列转换行), JavaScript解决思路
    c# 异步线程
    C# 读取数据库存储过程返回值 笔记
    利用UtilityLibrary.dll WeifenLuo.WinFormsUI.Docking.dll控件创建工具栏效果
    关于C#Winform线程调用窗体的使用方法以及窗体的单一显示
    通过调用API函数实现的无边框窗体的拖拽,比判断坐标更快捷
    ubuntu下安装redis
    ubuntu下安装beanstalkd
    preg_match_all 执行一个全局正则表达式匹配
    mongodb的安装和进入
  • 原文地址:https://www.cnblogs.com/lyt0207/p/12100829.html
Copyright © 2011-2022 走看看