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

    不积跬步无以至千里
  • 相关阅读:
    演示stop暴力停止线程导致数据不一致的问题,但是有些有趣的发现 (2017-07-03 21:25)
    Fragment的startActivityForResult和Activity的startActivityForResult的区别
    Maven实战(七)settings.xml相关配置
    vue-cli脚手架引入element UI的正确打开方式
    node起server--axios做前端请求----进行CORS--跨域请求
    ES6 promise简单实现
    实现一个简单的订阅与发布模式的代码块,和redux
    git使用笔记
    用yeoman搭建react画廊项目笔记
    npm包管理器小节一下
  • 原文地址:https://www.cnblogs.com/lyt0207/p/12100829.html
Copyright © 2011-2022 走看看