js控制div滚动条（怎么用js为div做滚动条实例）

本文目录

• 怎么用js为div做滚动条实例
• js控制div内的滚动条的位置
• 如何用js控件div的滚动条，让它在内容更新时自动滚到底部
• 如何用js控制移动div的滚动条
• js有什么方法代替scrollTop，实现div 里面滚动
• JS控制div滚动条位置问题

怎么用js为div做滚动条实例

《!DOCTYPE html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《title》js滚动条特效《/title》
《style type=“text/css“》
*{ margin:0; padding:0;}
p{ height:1000px;}
#mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden; margin:50px auto;}
#content{ height:2500px; position:absolute; left:0; top:0; background:url(/jscss/demoimg/logo_demo1.gif) }
.scrollDiv{ width:18px; position:absolute; top:0; background:#666; border-radius:10px;}
《/style》
《/head》
《body》
《div id=“mainBox“》
《div id=“content“》《/div》
《/div》
《p》《/p》
《script type=“text/javascript“》
var doc=document;
var _wheelData=-1;
var mainBox=doc.getElementById(’mainBox’);
function bind(obj,type,handler){
var node=typeof obj==“string“?$(obj):obj;
if(node.addEventListener){
node.addEventListener(type,handler,false);
}else if(node.attachEvent){
node.attachEvent(’on’+type,handler);
}else{
node[’on’+type]=handler;
}
}
function mouseWheel(obj,handler){
var node=typeof obj==“string“?$(obj):obj;
bind(node,’mousewheel’,function(event){
var data=-getWheelData(event);
handler(data);
if(document.all){
window.event.returnValue=false;
}else{
event.preventDefault();
}

});
//火狐
bind(node,’DOMMouseScroll’,function(event){
var data=getWheelData(event);
handler(data);
event.preventDefault();
});
function getWheelData(event){
var e=event||window.event;
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=className;
mainBox.appendChild(_scrollBox);
return _scroll;
},
//调整滚动条
_resizeScorll:function(element,mainBox,contentBox){
var p=element.parentNode;
var conHeight=contentBox.offsetHeight;
var _width=mainBox.clientWidth;
var _height=mainBox.clientHeight;
var _scrollWidth=element.offsetWidth;
var _left=_width-_scrollWidth;
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)+“px“;
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.clientHeight;
element.onmousedown=function(event){
var _this=this;
var _scrollTop=element.offsetTop;
var e=event||window.event;
var top=e.clientY;
//this.onmousemove=scrollGo;
document.onmousemove=scrollGo;
document.onmouseup=function(event){
this.onmousemove=null;
}
function scrollGo(event){
var e=event||window.event;
var _top=e.clientY;
var _t=_top-top+_scrollTop;
if(_t》(mainHeight-element.offsetHeight)){
_t=mainHeight-element.offsetHeight;
}
if(_t《=0){
_t=0;
}
element.style.top=_t+“px“;
contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+“px“;
_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):mainBox;
var flag=0,rate=0,wheelFlag=0;
if(node){
mouseWheel(node,function(data){
wheelFlag+=data;
if(_wheelData》=0){
flag=_wheelData;
element.style.top=flag+“px“;
wheelFlag=_wheelData*12;
_wheelData=-1;
}else{
flag=wheelFlag/12;
}
if(flag《=0){
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)+“px“;
});
}
},
_clickScroll:function(element,mainBox,contentBox){
var p=element.parentNode;
p.onclick=function(event){
var e=event||window.event;
var t=e.target||e.srcElement;
var sTop=document.documentElement.scrollTop》0?document.documentElement.scrollTop:document.body.scrollTop;
var top=mainBox.offsetTop;
var _top=e.clientY+sTop-top-element.offsetHeight/2;
if(_top《=0){
_top=0;
}
if(_top》=(mainBox.clientHeight-element.offsetHeight)){
_top=mainBox.clientHeight-element.offsetHeight;
}
if(t!=element){
element.style.top=_top+“px“;
contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+“px“;
_wheelData=_top;
}
}
}
}
new addScroll(’mainBox’,’content’,’scrollDiv’);
《/script》
《/body》
《/html》

js控制div内的滚动条的位置

通过div的scrollTop变动控制垂直滚动条位置。

通过div的scrollLeft变动控制水平滚动条位置。

示例

如何用js控件div的滚动条，让它在内容更新时自动滚到底部

三种控制DIV内容滚动的方法：

方法一：
使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置
《script language=“javascript1.2“ type=“text/javascript“》
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.click();
}
《/script》
《div style=“width:500px;overflow:auto“》
《div id=“msg“ style=“overflow:hidden;width:480px;“》《/div》
《div》《a id=“msg_end“ name=“1“ href=“#1“》 《/a》《/div》
《/div》

方法二：
利用DIV的scrollIntoView方法，将最底端滚动到可视位置 [list=1]《script
language=“javascript1.2“
type=“text/javascript“》
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.scrollIntoView();
}
《/script》
《div style=“width:500px;overflow:auto“》
《div id=“msg“ style=“overflow:hidden;width:480px;“》《/div》
《div id=“msg_end“ style=“height:0px; overflow:hidden“》《/div》
《/div》

方法三：
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “《/span》《br /》
《div id=“scrolldIV“ style=“overflow:auto; height: 100px; width: 400px; border: 1px solid #999;“》
《/div》
《input type=“button“ value=“插入一行“ onclick=“add();“》
《!--************************************* 实例代码结束 *************************************--》
《/div》
《/div》
《/body》
《/html》

如何用js控制移动div的滚动条

通过div的scrollTop变动控制垂直滚动条位置。
通过div的scrollLeft变动控制水平滚动条位置。
示例
《body》
//d1是外层div，带滚动条
《div id=’d1’ style=’height:200px;width:100px;overflow:auto;background:blue;’》
《div style=’height:500px;width:500px;background:yellow’》2222《/div》
《/div》
《/body》
《script》
document.getElementById(’d1’).scrollTop=100;//通过scrollTop设置滚动到100位置
document.getElementById(’d1’).scrollLeft=200;//通过scrollTop设置滚动到200位置
《/script》

js有什么方法代替scrollTop，实现div 里面滚动

你好，我先需要明确一下你是要问jQuery中scrollTop获取滚动条距顶端的距离，还是要使用scrollTop来设置滚动条距顶端的距离，或者说需要二者兼备。

1、如果是获取，原生js实现很容易：

1
2
3

var div = document.getElementById(’wgt-ask’),
scrollTop = div.scrollTop;
console.log(scrollTop); // 100

前提是div已经具备滚动条，不然使用为0

2、如果是设置，原生js也很简单：

1
2

var div = document.getElementById(’wgt-ask’);
div.scrollTop = 100;

依然前提是div已经具备滚动条，否则设置无效

3、如果是二者兼备，这里就要简单的封装一下了：

1
2
3
4
5
6
7
8
9
10
11

function scrollTop(obj, len){
if (typeof len === ’undefined’) {
return obj.scrollTop;
} else {
obj.scrollTop = len;
}
}

var div = document.getElementById(“wgt-user“);
scrollTop(div, 100); // 设置
var st = scrollTop(div); // 100 获取

希望是你想要的结果，如有疑问欢迎追问，望采纳~

JS控制div滚动条位置问题

《script》
function Cmd(v, height){
//下面这段用来每次点击时清除所有高亮
var table1 = document.getElementById(“table1“);
var alks = table1.getElementsByTagName(“a“);
for(var i=0; i《alks.length; i++){
alks[i].style.background = ““;
alks[i].style.color = ““;
}
//下面这段用来每次点击时设置对应ID的高亮
var link = document.getElementById(“tr“ + v).getElementsByTagName(“a“);
if(link.length 》 0){
var a = link;
a.style.background = “blue“;
a.style.color = “white“;
}
//下面这段用来控制滚动条
var divBox = document.getElementById(“divBox“); //左侧带滚动条的大DIV
divBox.scrollTop = height;
}
《/script》
《div id=“divBox“ style=“width:150px;height:200px;overflow-y:scroll;overflow-x:none;“》
《table id=“table1“ style=“width:100%;“》
《tr id=“tr1“ style=“height:50px;“》《td》《a href=“javascript:void(0);“》栏目1《/a》《/td》《/tr》
《tr id=“tr2“ style=“height:50px;“》《td》《a href=“javascript:void(0);“》栏目2《/a》《/td》《/tr》
《tr id=“tr3“ style=“height:50px;“》《td》《a href=“javascript:void(0);“》栏目3《/a》《/td》《/tr》
《tr id=“tr4“ style=“height:50px;“》《td》《a href=“javascript:void(0);“》栏目4《/a》《/td》《/tr》
《tr id=“tr5“ style=“height:50px;“》《td》《a href=“javascript:void(0);“》栏目5《/a》《/td》《/tr》
《tr id=“tr6“ style=“height:50px;“》《td》《a href=“javascript:void(0);“》栏目6《/a》《/td》《/tr》
《/table》
《/div》
《div style=“margin-top:30px;“》
《a href=“javascript:void(0);“ onclick=“Cmd(1,0);“》跳到栏目1《/a》
《a href=“javascript:void(0);“ onclick=“Cmd(2,50);“》跳到栏目2《/a》
《a href=“javascript:void(0);“ onclick=“Cmd(3,100);“》跳到栏目3《/a》
《a href=“javascript:void(0);“ onclick=“Cmd(4,150);“》跳到栏目4《/a》
《a href=“javascript:void(0);“ onclick=“Cmd(5,200);“》跳到栏目5《/a》
《a href=“javascript:void(0);“ onclick=“Cmd(6,250);“》跳到栏目6《/a》
《/div》

如上代码，我根据你的要求，写了个模拟效果，点击下面的链接，上面的栏目自动高亮，滚动条滚动到对应位置。

关键的地方在Cmd(v, height)这个方法的height参数上，你在地图上生成点的时候，按ID的顺序附加上高度的增量，高度的增量正是滚动条里栏目的自身高度，我这里设置的是50，你可以按需要设置自己的增量。

参考这段代码的思路，希望对你有帮助。