<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. input回车问题

    今天有一个问题,就是input对象没有加任何事件自己回车导致跳到了404页面.处理的时候,并发现没找到回车事件的控制. 那么只有一种情况,就是自带的回车控制. 百度了一下,如下面博文里面的写法.我这边 ...

  2. .NET二级域名共享Session

    ASP.NET二级域名站点共享Session状态 今天, 我要写的是如何在二级域名站点之间,主站点和二级域名站点之间共享Session. 首先, Session要共享,站点之间SessionID必须要 ...

  3. 【C#新特性】不用out ref同时返回多个值-元组Tuple

    元组Tuple,它是一种固定成员的泛型集合 下面先看看官方的一个使用例子: 创建一个包含7个元素的Tuple数组 // Create a 7-tuple. , , , , , );// Display ...

  4. vue经验 - 那些自己给自己挖的深坑

    深坑场景:vue-异步请求数据,数据还没回来,页面却如饥似渴的准备好了的尴尬场景:问题原因和解决如下: 1.先说vuex中的store,一开始我为了偷懒是这么设置的,如下图: 然后我到了组件中直接这么 ...

  5. HTTP协议剖析 (附HttpWatch工具监控网络请求)

    工具:HttpWatch Prov7.2.13破解版(带正版key) HTTP协议概述   思考2个要点: 第一:浏览器和服务器是通过什么连接的 第二:这种连接方式是怎么实现的   通过Interne ...

  6. call()、apply()和bind()的异同

    相同点: 改变this的指向: var a = { name:"丸子", fn:function(){ console.log(this.name); } } var b = a. ...

  7. 第四步 使用 adt-eclipse 打包 Cordova (3.0及其以上版本) + sencha touch 项目

    cordova最新中文api http://cordova.apache.org/docs/zh/3.1.0/ 1.将Cordova 生成的项目导入到adt-eclipse中,如下: 项目结构如下: ...

  8. 硬件RDMA的驱动配置和测试

    author:headsen chen date: 2019-01-18  10:22:20 notice:created  by headsen chen himself and not allow ...

  9. 解决使用Foxmail客户端软件不能收取腾讯企业邮箱的全部邮件

    一般说来,使用Foxmail客户端软件收取邮箱时,需要作如下几步: 1.进入邮箱web界面授权开启POP3/SMTP服务.IMAP/SMTP等服务 2.在邮箱web界面配置收取选项,可选择收取全部邮件 ...

  10. iOS - 去除数组中重复数据的几种方法

    第一种:利用NSDictionary的AllKeys(AllValues)方法 代码: NSArray *dataArray = @[@"2018-02-01",@"20 ...