这个是很常见的一个任务了,基本是通过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. 安卓getSystemService

    getSystemService是Activity中的方法,依据传入的name来取得相应的服务对象,这些服务名称參数都是Context类中的常量        Name                 ...

  2. python 中安装pandas

    由于计算arima模型需要用到pandas,费尽千辛万苦找到了一个下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/,在这里能下载到很多我们要用的模块.找到 ...

  3. 优雅得使用composer来安装各种PHP小工具

    Composer对php世界的影响是巨大的,使用composer来代替PEAR一定是大势所趋.当小伙伴们都还沉浸在composer带来的便利的时候,有没有想过如何更好的使用composer呢,网上大部 ...

  4. zuul超时及重试配置1

    eureka: client: register-with-eureka: true serviceUrl: defaultZone: http://localhost:8761/eureka/ se ...

  5. LeetCode: Permutations 解题报告

    Permutations Given a collection of numbers, return all possible permutations. For example,[1,2,3] ha ...

  6. python爬取百思不得姐视频

    # _*_ coding:utf-8 _*_ from Tkinter import * from ScrolledText import ScrolledText import urllib #im ...

  7. iOS菊花加载圈

    自定制一个继承于UIView的类然后重写initWithFrame方法;如下 - (id)initWithFrame:(CGRect)frame { self = [super initWithFra ...

  8. 欢迎使用markdowm编辑器

    欢迎使用Markdown编辑器写博客 [Mark一下CSDN用Markdown的写法而已] 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown ...

  9. 窗口过程 Wndproc

    操作系统向应用程序发送一系列消息,如左键按下和左键抬起,应用程序将通过GetMessage等方法 Wndproc应用例子最终将消息提交到窗口过程(WndProc)指向一个应用程序定义的窗口过程的指针. ...

  10. [应用]Linux下" >/dev/null 2>&1 "

    转自:http://blog.csdn.net/sunrier/article/details/7695839 这条命令的意思就是在后台执行这个程序,并将错误输出2重定向到标准输出1,然后将标准输出1 ...