这个是很常见的一个任务了,基本是通过CSS去实现滚动条。
滚动条
设置是否显示滚动条主要是在CSS中设置下列的属性:

代码如下:
overflow:visible|auto|hidden|scroll
overflow-x:横向滚动条
overflow-y:纵向滚动条

参数的意义:
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象尺寸的内容
scroll: 总是显示滚动条
overflow:auto;这个表示当你内容超过div高度出现垂直的滚动条
所以我们想在需要的时候显示垂直的滚动条,可以这么实现:

代码如下:
<divstyle="overflow:auto;">...</div>

设置div滚动条的更多相关文章

  1. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  2. 设置DIV随滚动条滚动而滚动

    有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  4. FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是point ...

  5. div滚动条演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  6. 如何设置div的宽度为100%-xx px?

    如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relativ ...

  7. Selenium2+python自动化26-js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  8. 如何设置DIV水平、垂直居中

    一.水平居中 需要设置两点: 1  设置DIV 的width属性即宽度. 2  设置div的margin-left和margin-right属性即可 代码: <div style="w ...

  9. jquery设置div,文本框 表单的值示例

    我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML标记)val() - 设置或返回表单字段的值 1 ...

随机推荐

  1. 【Android】4.1 UI设计器

    分类:C#.Android.VS2015:创建日期:2016-02-06 开发人员可以用以下两种方式声明UI:一是通过.xml文件(不带预览界面)或者.axml文件(带预览界面)来描述:二是用C#代码 ...

  2. Avoid strong reference cycles

    转自:http://masteringios.com/blog/2014/03/06/avoid-strong-reference-cycles/ With the introduction of A ...

  3. cocos2d-x画线

    在class HelloWorld : public cocos2d::CCLayer中添加 void draw(); 实现: void HelloWorld::draw() { CCSize s = ...

  4. 移动开发UI库

    参考链接:http://www.cnblogs.com/edobnet/archive/2012/08/17/2643573.html 自己总结: jquery 的移动开发UI库  http://jq ...

  5. Cocos2d-x CCScale9Sprite 用法

    1.创建方式有三种: (1).直接创建 auto blocks = Scale9Sprite::create("blocks9.png", Rect(0, 0, 96, 96), ...

  6. ny27 水池数目

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上 ...

  7. org.hibernate.HibernateException: Could not parse configuration: /hibernate.cfg.xm

    org.hibernate.HibernateException: Could not parse configuration: /hibernate.cfg.xm 检查jar包是否正确以及配置的xm ...

  8. Gradle修改本地仓库的位置

    http://blog.csdn.net/tower888/article/details/38879955 http://blog.csdn.net/z69183787/article/detail ...

  9. Office 2013 Excel 打开文档很慢很慢的解决方法

    这个问题查了很多案例,试了很多方法,但是只有下面这个方法有用! 这几天打开excel文档很慢很慢,双击之后好久没反应,过会儿它才慢慢冒出来,当时将就了,刚刚休息的时候想着查一下吧,不然很影响工作效率! ...

  10. LeetCode: Roman to Integer 解题报告

    Roman to IntegerGiven a roman numeral, convert it to an integer. Input is guaranteed to be within th ...