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

    不积跬步无以至千里
  • 相关阅读:
    Elasticsearch 快速入门
    Linux 非互联网环境安装依赖包
    linux 安装mysql(rpm文件安装)
    Nginx安装与配置文件nginx.conf详解
    Linux 知识
    MySQL Windows安装连接
    post请求body格式
    MySQL 数据库备份
    SOAP与restful webservice
    大数据架构工具hadoop
  • 原文地址:https://www.cnblogs.com/lyt0207/p/12100829.html
Copyright © 2011-2022 走看看