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

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

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

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

4、先设定一下滚动条内框的大小。

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

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

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

强制显示滚动条:

html { overflow: scroll}

强制隐藏滚动条:

html { overflow: hidden}

隐藏IE的水平滚动条:

html { overflow-x: hidden}

隐藏IE的垂直滚动条:

html { overflow-y: hidden}

强制显示IE的水平滚动条:

html { overflow-x: scroll}

强制显示IE的垂直滚动条:

html { overflow-y: scroll}

强制显示Mozilla的水平滚动条:

html { overflow:-moz-scrollbars-horizontal}

注意: 仅仅强制显示水平滚动条. 也就是说, 即使需要显示垂直滚动条时, 垂直滚动条也不会出现.

强制显示Mozilla的垂直滚动条:

html { overflow:-moz-scrollbars-vertical}

注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.

<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>

---