如何使用JS控制DIV内容的滚动条

1、首先需要新建一个HTML文档，这里设立一下基本的架构。

2、再新建一个CSS文件，用link关联一下HTML文档。

3、创建DIV标签，并且往里面填充内容。

4、先设定一下滚动睁衡条内悉早正框的大小。

5、用border先来查看是否有超出，这里可以看出超出了很多内容。

6、overflow-y: scrolloverflow-x: scroll加上这个样式滚动条就会出现了。

7、现在就能对轨道和滚动睁悔条进行样式的设置了。

<script language="javascript">

$(function(){

$("#all").css({"height":"auto","width":"100%","overflow":"hidden","float":"left"})//追加样式

if($(document).height() >$(window).height()){

$("#all").css({"height":$(window).height()-35,"width":"100%","overflow":"auto","float":"left"段埋念})//追加样式

}

$(window).resize(function(){

$("#all").css({"height":"auto","width":"100%","overflow":"auto","float":"left"})//追加样式

if( $("#all").height() >= $(window).height()-35() ){

$("#all").css({"height":$(window).height()-35,"width":"100%","overflow"握困:"auto","float":"left"})//追加样式

}else{

$("#all"液裤).css({"height":$(window).height()-35,"width":"100%","overflow":"hidden","float":"left"})//追加样式

}

})

}) 将要添加滚动条的部分用<DIV ID="all" ></div> 包含进来

</script>

可以设置左边菜单项div的overflow-x:autooverlfow-y:auto这样就会自动生成了滚动条，但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？感兴趣的朋友可以了解下本文

最近做项目中有一个模块是用于实时监控的，左边有个菜单栏用于显示所有的设备，那当然是从数据库中动态获取的了，右边是个iframe用于显示监控画面。

本来这个功能并不复杂，左边的菜单项是利用dtree.js来实现的，可时当功能实现完成之后，却发现一个问题，就是左边菜单栏中的设备名有的会很长，会

超出了div的长度，准确说是左边iframe的宽度和长度不够。那么，这时就必须要利用滚动条了，可以设置左边菜单项div的overflow-

x:autooverlfow-y:auto这样就会自动生成了滚动条，中饥但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？

经过从网上的不断搜索，发现有两种方法：

第一种方法：利用CSS提供的样式，一共是8种属性吧，在这里不做详细介绍，网上很多这方面的资料。

第二种方法：自己写一个新的滚动条，即不用div自带的滚动条。这样想要什么样的效果就有什么样的效果。具体实现，在网上搜了很多，可以发现基本上只有竖向滚动条，而没有横向滚动条，无奈之下，自己利用jquery写另一个滚动条，当然也借鉴了只有竖向滚动条的程序。

说

一下具体实现思路：目标div

即需要生成滚动条的div，里面嵌套了3个div，分别是用链模于显示内容的div_content，显示竖向滚动条的div_H,显示横向滚动条的

div_W,具体布局就是按照自带滚动条的div的布局一样，然后显示滚动条的div即div_H和div_W有各自包含了3个div，即左右箭头2个，

滚动条1个。具体代码如下：

复制代码

代码如下:

if($(_self).children(".jscroll-c").height()==null){

//添加内容框(div)

$(_self).wrapInner("<div

class='jscroll-c'

style='top:0pxz-index:9999zoom:1position:relative'></div>")

//添加竖向滚动条

$(_self).append("<div

class='jscroll-e'

unselectable='on'

style='height:97.5%top:0pxright:0-moz-user-select:noneposition:absoluteoverflow:hiddenz-index:10000'><div

class='jscroll-u'

style='position:absolutetop:0pxwidth:100%right:0background:blueoverflow:hidden'></div><div

class='jscroll-h'

unselectable='on'

style='background:greenposition:absoluteleft:0-moz-user-select:noneborder:1px

solid'></div><棚培缓div

class='jscroll-d'

style='position:absolutebottom:0pxwidth:100%left:0background:blueoverflow:hidden'></div></div>")

//添加横向滚动条

$(_self).append("<div

class='jscroll-s'

unselectable='on'

style='width:180pxbottom:0pxleft:0-moz-user-select:noneposition:absoluteoverflow:hiddenz-index:10000'><div

class='jscroll-l'

style='position:absolutebottom:0pxheight:100%left:0background:blueoverflow:hidden'></div><div

class='jscroll-g'

unselectable='on'

style='height:100%background:greenposition:absoluteleft:0-moz-user-select:noneborder:1px

solid'></div><div

class='jscroll-r'

style='position:absolutebottom:0pxheight:100%right:0background:blueoverflow:hidden'></div></div>")

}

然后无非就是一些判断，div的内容是否超过了div的范围，监听事件的添加。具体代码可见我的下载资源；

---