这个是很常见的一个任务了,基本是通过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. SD卡WAV音乐播放器(quartus11.0)(FAT32)(DE2-115)

    准备工具:格式工厂,Windows录音机,SD卡(小于等于2G),音箱 首先,选一首MP3,用格式工场转化成WAV格式.可以看到转化后的文件变得很大,因为WAV就是AD采样值加个文件头,所以数据量巨大 ...

  2. Remoting异步回调,向在线用户广播消息

    本文目的:向Remoting在线客户端广播消息. 使用的主要技术:异步,回调,广播. 实现过程: 定义远程实例 using System; using System.Collections.Gener ...

  3. node js 调试方法

    1. node-debug tutorial 大家对nodejs调试应该都比较头疼,至少我这个不用IDE写js的人很头疼这个,其实node的生态圈非常好 有非常好的工具和非常潮的开发方式 这里总结了3 ...

  4. JMeter学习笔记(五)-总结

    本周主要学习了JMeter如下几方面内容: (1)Bdboy录制方式: (2)JMeter的代理录制方式: (3)关联,在关联时我们要找到哪些内容是要关联的,这个主要通过分析哪些内容是由服务器返回的, ...

  5. 【图文教程】WebStorm下使用Github下载以及上传代码

    1.从一个git路径下,下载代码到本地,选择VCS->Checkout from Version Control ->GitHub.        2.可能会弹出需要设置上传代码的密码,这 ...

  6. [小技巧]Mac上chrome打开触控板双指前进后退功能

    Orz,本以为是默认开启的,结果发现并不是,从系统里找了半天发现没找到-就搜了一下,原来可以命令开启来 defaults write com.google.Chrome AppleEnableSwip ...

  7. Datax将本地文件导入Hbase数据库!!!酷酷酷

    Hbase Writer的json文件链接: https://github.com/alibaba/DataX/blob/master/hbase11xwriter/doc/hbase11xwrite ...

  8. JVM致命错误日志(hs_err_pid.log)分析(转载)

    当jvm出现致命错误时,会生成一个错误文件 hs_err_pid<pid>.log,其中包括了导致jvm crash的重要信息,可以通过分析该文件定位到导致crash的根源,从而改善以保证 ...

  9. js中特殊转换字符为html标签

    function htmlEncode(text){ return text.replace(/&/g,'&amp').replace(/\"/g,'&quot'). ...

  10. 如何用Visual Studio 2013 (vs2013)编写C语言程序

    如何用Visual Studio 2013 (vs2013)编写C语言程序 (2014-05-16 10:58:15)   Visual Studio 2013是一个很强大的软件,但是刚开始用Visu ...