div+css实现网页上下左右滚动条代码
我的图书馆
div+css实现网页上下左右滚动条代码
如何在网页中出现上下左右滑动框
div显示上下左右滚动条
1&div style="width:260height:120 overflow: border:1"& 这里是你要显示的内容 &/div&
div显示上下滚动条的css代码
1&div style="width:260height:120 overflow-y: border:1"& 这里是你要显示的内容 &/div&
div显示左右滚动条的css代码
1&div style="width:260height:120 overflow-x: border:1"& 这里是你要显示的内容 &/div&
修改滚动条颜色的代码
123456SCROLLBAR-FACE-COLOR(立体滚动条凸出部分的颜色)
SCROLLBAR-HIGHLIGHT-COLOR(滚动条空白部分的颜色)
SCROLLBAR-SHADOW-COLOR(立体滚动条阴影的颜色)
SCROLLBAR-ARROW-COLOR(上下按钮上三角箭头的颜色)
SCROLLBAR-BASE-COLOR(滚动条的基本颜色)
SCROLLBAR-DARK-SHADOW-COLOR(立体滚动条强阴影的颜色)
&&&&声明:&&如有关于wordpress代码问题请留言即可...！& &&
发表评论：
馆藏&40532
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&DIV模拟的自定义滚动条 - weistar - ITeye技术网站
博客分类：
除了上下两个箭头以外，滚动条和一般的浏览器基本差不多 html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的. &div id="mainBox"&
&div id="content"&&/div& &/div&
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&div模拟的自定义滚动条&/title&
&style type="text/css"&
margin: 0;
padding: 0;
height: 1000
#mainBox {
width: 400
height: 500
border: 1px #
margin: 50
#content {
height: 2500
background:url(img/scrollTest.jpg);
.scrollDiv {
background: #666;
border-radius: 10
&div id="mainBox"&
&div id="content"&&/div&
&script type="text/javascript"&
var _wheelData = -1;
var mainBox = doc.getElementById('mainBox');
function bind(obj, type, handler) {
var node = typeof obj == "string" ? $(obj) :
if (node.addEventListener) {
node.addEventListener(type, handler, false);
} else if (node.attachEvent) {
node.attachEvent('on' + type, handler);
node['on' + type] =
function mouseWheel(obj, handler) {
var node = typeof obj == "string" ? $(obj) :
bind(node, 'mousewheel', function(event) {
var data = -getWheelData(event);
handler(data);
if (document.all) {
window.event.returnValue =
event.preventDefault();
bind(node, 'DOMMouseScroll', function(event) {
var data = getWheelData(event);
handler(data);
event.preventDefault();
function getWheelData(event) {
var e = event || window.
return e.wheelDelta ? e.wheelDelta : e.detail * 40;
function addScroll() {
this.init.apply(this, arguments);
addScroll.prototype = {
init : function(mainBox, contentBox, className) {
var mainBox = doc.getElementById(mainBox);
var contentBox = doc.getElementById(contentBox);
var scrollDiv = this._createScroll(mainBox, className);
this._resizeScorll(scrollDiv, mainBox, contentBox);
this._tragScroll(scrollDiv, mainBox, contentBox);
this._wheelChange(scrollDiv, mainBox, contentBox);
this._clickScroll(scrollDiv, mainBox, contentBox);
//创建滚动条
_createScroll : function(mainBox, className) {
var _scrollBox = doc.createElement('div')
var _scroll = doc.createElement('div');
var span = doc.createElement('span');
_scrollBox.appendChild(_scroll);
_scroll.appendChild(span);
_scroll.className = classN
mainBox.appendChild(_scrollBox);
//调整滚动条
_resizeScorll : function(element, mainBox, contentBox) {
var p = element.parentN
var conHeight = contentBox.offsetH
var _width = mainBox.clientW
var _height = mainBox.clientH
var _scrollWidth = element.offsetW
var _left = _width - _scrollW
p.style.width = _scrollWidth + "px";
p.style.height = _height + "px";
p.style.left = _left + "px";
p.style.position = "absolute";
p.style.background = "#ccc";
contentBox.style.width = (mainBox.offsetWidth - _scrollWidth)
var _scrollHeight = parseInt(_height * (_height / conHeight));
if (_scrollHeight &= mainBox.clientHeight) {
element.parentNode.style.display = "none";
element.style.height = _scrollHeight + "px";
//拖动滚动条
_tragScroll : function(element, mainBox, contentBox) {
var mainHeight = mainBox.clientH
element.onmousedown = function(event) {
var _this =
var _scrollTop = element.offsetT
var e = event || window.
var top = e.clientY;
//this.onmousemove=scrollGo;
document.onmousemove = scrollGo;
document.onmouseup = function(event) {
this.onmousemove =
function scrollGo(event) {
var e = event || window.
var _top = e.clientY;
var _t = _top - top + _scrollT
if (_t & (mainHeight - element.offsetHeight)) {
_t = mainHeight - element.offsetH
if (_t &= 0) {
element.style.top = _t + "px";
contentBox.style.top = -_t
* (contentBox.offsetHeight / mainBox.offsetHeight)
_wheelData = _t;
element.onmouseover = function() {
this.style.background = "#444";
element.onmouseout = function() {
this.style.background = "#666";
//鼠标滚轮滚动，滚动条滚动
_wheelChange : function(element, mainBox, contentBox) {
var node = typeof mainBox == "string" ? $(mainBox) : mainB
var flag = 0, rate = 0, wheelFlag = 0;
if (node) {
mouseWheel(
function(data) {
wheelFlag +=
if (_wheelData &= 0) {
flag = _wheelD
element.style.top = flag + "px";
wheelFlag = _wheelData * 12;
_wheelData = -1;
flag = wheelFlag / 12;
if (flag &= 0) {
wheelFlag = 0;
if (flag &= (mainBox.offsetHeight - element.offsetHeight)) {
flag = (mainBox.clientHeight - element.offsetHeight);
wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;
element.style.top = flag + "px";
contentBox.style.top = -flag
* (contentBox.offsetHeight / mainBox.offsetHeight)
_clickScroll : function(element, mainBox, contentBox) {
var p = element.parentN
p.onclick = function(event) {
var e = event || window.
var t = e.target || e.srcE
var sTop = document.documentElement.scrollTop & 0 ? document.documentElement.scrollTop
: document.body.scrollT
var top = mainBox.offsetT
var _top = e.clientY + sTop - top - element.offsetHeight
if (_top &= 0) {
if (_top &= (mainBox.clientHeight - element.offsetHeight)) {
_top = mainBox.clientHeight - element.offsetH
if (t != element) {
element.style.top = _top + "px";
contentBox.style.top = -_top
* (contentBox.offsetHeight / mainBox.offsetHeight)
_wheelData = _
new addScroll('mainBox', 'content', 'scrollDiv');
浏览: 246957 次
来自: 武汉css实现div自动添加滚动条(图片或文字等超出时显示)
作者：佚名
字体：[ ] 来源：互联网 时间：01-25 11:47:06
css实现div自动添加滚动条比较实用的功能，当图片或文字超出div所规定的宽或高时，会自动出现滚动条，这一点还是比较有利于用户体验的，本文整理了一些实现自动滚动条的方法，感兴趣的朋友不妨参考下，或许对你认识css设置滚动条有所帮助
原来用过，没有太在意，最近又用到。记下方便以后用。 代码如下: &div style='border:0padding:3 PADDING:0 width:200 height:480 LINE-HEIGHT: 20 OVERFLOW: '&&/div& 语法： overflow : visible | auto | hidden | 参数： 1.visible :不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 2.auto :此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 3.hidden :不显示超过对象尺寸的内容 4.scroll :总是显示滚动条 说明： 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 设置textarea对象为hidden值将隐藏其滚动条。 对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。 自IE5开始，此属性在MAC平台上可用。 对应的脚本特性为overflow。 示例： 代码如下: div { overflow: height: 100 width: 100 }
大家感兴趣的内容
12345678910
最近更新的内容2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。