<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. 使用filezilla连接树莓派失败

    报错: 错误: Network error: Connection refused 错误: 无法连接到服务器 原因是新版的树莓派系统默认关闭ssh,进入树莓派打开ssh即可. sudo service ...

  2. QWidget编写的安卓app

    最近为了配套人脸识别的整套设备去检测,特意做了个机关控制app,需要现场修改前端设备和服务器设备的一些参数以便进行检测.qt做一些简单的app还是非常方便的.特意增加了禁用屏保功能.apk文件体验:h ...

  3. QSS样式表之PS黑色风格+白色风格+淡蓝色风格(开源)

    用QUI皮肤生成器制作皮肤,基本上不超过一分钟就可以生成一套自己想要的皮肤,只要设置八种颜色即可.本人非常喜欢这套黑色风格样式皮肤,特意分享出来,下载地址:https://download.csdn. ...

  4. 使用import取代require

    首先,Module 语法是 JavaScript 模块的标准写法,坚持使用这种写法.使用import取代require. // bad const moduleA = require('moduleA ...

  5. 国产手机插入mac os 系统中无法被识别的解决方法

    一些国产手机插入mac os 系统中无法被识别,在命令行输入 system_profiler SPUSBDataType在, 然后将魅蓝note的vendor id 添加至 ~/.android/ad ...

  6. 题目1459:Prime ring problem(素数环问题——递归算法)

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

  7. Unity3D 边缘高光Shader

    Shader "Custom/NewShader" { Properties { _MainTex ("Base (RGB)", 2D) = "whi ...

  8. Maven Assembly插件介绍

    转自:http://blueram.iteye.com/blog/1684070 已经写得挺好的,就不用重写了. 你是否想要创建一个包含脚本.配置文件以及所有运行时所依赖的元素(jar)Assembl ...

  9. 一个简单web系统的接口性能分析及调优过程

    在测试一个简单系统接口性能压力时,压到一定数量,程序总是崩溃,查看相关机器相关数据时,CPU.内存.IO占用均不高,问题自然出现在其它地方先介绍下系统部件架构 Resin版本为:[root@local ...

  10. python标准库和第三方库的区别

    1.python的标准库是随着pyhon安装的时候默认自带的库. 2.python的第三方库,需要下载后安装到python的安装目录下,不同的第三方库安装及使用方法不同. 3.它们调用方式是一样的,都 ...