<div class="wrapper">
  <ul>
     <li>1</li>
     <li>2</li>
      <li>3</li>
  </ul>
</div>

.wrapper{
position:relative; //这个属性必须写,可以为relative或absolute。原因见js部分
margin:50px auto; //上下50px的margin, 水平居中
height:650px; //必须设定scrollbar容器的高度,只有当内容高度超过容器高度的时候,才会显示scrollbar
width:200px;
overflow:hidden; //当父容器高度不足时,只有通过滚动条才能看到超出的内容
background:#eee;
}
ul{
margin:0;
padding:0; //去掉ul默认的样式
list-style:none;
}

ul li{
border:1px solid #ccc;
height:50px;//所有的li高度加起来超过650px,即容器的高度时候,才会出现滚动条
width:100%;
}

详情:https://www.cnblogs.com/yingge/p/5737994.html

isScroll的滚动组件的用法的更多相关文章

  1. 基于vue的无缝滚动组件

    vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...

  2. 01day-微信小程序 表单组件 动态绑定变量 导航组件 地图组件 view text button 上下滚动组件

    04-开发者环境搭建(下载安装开发者工具) 01==>微信开发工具的下载 安装 微信小程序的工具是 下载稳定版本的 安装的时候 直接下一步就可以了 02==>项目名陈随便输入 目录 App ...

  3. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  4. layui(七)——rate组件常见用法总结

    layui中提供了rate组件,用法很简单,直接上代码. <div id="test1"></div> <script> layui.use(' ...

  5. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

  6. Flutter学习笔记(24)--SingleChildScrollView滚动组件

    如需转载,请注明出处:Flutter学习笔记(23)--多 在我们实际的项目开发中,经常会遇到页面UI内容过多,导致手机一屏展示不完的情况出现,以Android为例,在Android中遇到这类情况的做 ...

  7. iOS开发之多图片无缝滚动组件封装与使用

    经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播 ...

  8. vue 自定义marquee无缝滚动组件

    先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...

  9. layui(三)——laypage组件常见用法总结

    laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染.核心方法: laypage.render(options)  来设置基础参数. 一.laypag ...

随机推荐

  1. c++学习笔记—单链表基本操作的实现

    用c++语言实现的单链表基本操作,包括单链表的创建(包括头插法和尾插法建表).结点的查找.删除.排序.打印输出.逆置.链表销毁等基本操作. IDE:vs2013 具体实现代码如下: #include  ...

  2. EPON ONU软件升级的若干优化方案

    1 说明 目前EPON ONU软件升级主要有IP方式(如SNMP/TR069)和TFTP+OAM两种.前者需占用大量IP地址,且配置ONU的IP地址需要手工操作,给业务开通和系统维护带来较大不便:后者 ...

  3. Android设计和开发系列第一篇:Notifications通知(Design)

    Design篇 Notifications The notification system allows users to keep informed about relevant and timel ...

  4. jQuery的init都做了些什么

    // 初始化jQuery对象,即jQuery.fn.init对象 // @param selector 选择器,可能是DOM对象.html字符串.jQuery对象.函数或其他任意值. // @para ...

  5. C# 程序自动重启的解决方法

    很多时候,我们有这样的场景,需要让程序自动重启,有很多种方法,比如用微软自带提供的方法,或者自己开辟新的线程重新调用.下面简单介绍两种方法. 方法一. 使用方法Application.Restart( ...

  6. 题目1454:Piggy-Bank(完全背包问题)

    题目链接:http://ac.jobdu.com/problem.php?pid=1454 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  7. FPM打包工具使用

    author:headsen chen date: 2019-01-19  14:57:09 个人原创博客,转自请注明出处和作者,否则追究法律责任 1,安装依赖和语言包 yum -y install ...

  8. 使用 intellijIDEA + gradle构建的项目如何debug

    在intellij IDEA里建立gradle项目(使用jett插件的web项目) 使用intellijIDEA提供的debug无效(无法进入断点) 摸索了一下,通过远程调试的方法来进行调试是可行的 ...

  9. 【SPOJ419】Transposing is Fun Pólya定理+欧拉函数

    [SPOJ419]Transposing is Fun 题意:给你一个$2^a\times2^b$的矩阵,将$1...n$中的数依次从左到右,从上往下填到矩阵里,再把矩阵转置,然后把所有数从左到右,从 ...

  10. selenium下firefox自动下载配置及问题

    在做自动化测试时,需要从网页上下载相关的文件到指定的目录,一直未能实现 网上正好有个blog文章介绍了如何下载 直接上代码: from selenium import webdriver import ...