<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> ???#div1{width:30px;height:500px;background:#000;position:absolute;} ???#div2{width:30px;height:100px;background:red;position:absolute;left:0;top:0;display:none;} ???#content1{width:500px;height:500px;border:1px solid #063;position:absolute;left:44px; overflow:hidden;} ???#content2{position:absolute;}</style><script> ???window.onload = function(){ ???????var oDiv1 = document.getElementById(‘div1‘); ???????var oDiv2 = document.getElementById(‘div2‘); ???????var oDiv3 = document.getElementById(‘content1‘); ???????var oDiv4 = document.getElementById(‘content2‘); ???????var contentHeight = oDiv3.clientHeight-oDiv4.offsetHeight; ???????????????if(contentHeight >= 0){ ???????????//直接返回 ???????????return false; ???????} ???????//溢出，显示滚动条 ???????var scrolRatio = oDiv3.clientHeight/oDiv4.offsetHeight; ???????var scrolHeight = scrolRatio*100; ???????oDiv2.style.height = scrolHeight+‘px‘; ???????oDiv2.style.display = ‘block‘; ???????var maxTop = oDiv1.offsetHeight - oDiv2.offsetHeight; ???????????????oDiv2.onmousedown = function(ev){ ???????????var ev = ev || event; ???????????var disY = ev.clientY-this.offsetTop;/*鼠标点击到元素的距离*/ ???????????????????????document.onmousemove = function(ev){ ???????????????var ev = ev || event; ???????????????var T = ev.clientY-disY;/*元素移动的距离*/ ???????????????if(T < 0){ ???????????????????T = 0; ???????????????}else if(T > maxTop){ ???????????????????T = maxTop; ???????????????} ???????????????oDiv2.style.top = T+‘px‘; ???????????????var iScale = T/maxTop; ???????????????oDiv4.style.top = contentHeight*iScale+‘px‘; ???????????}; ???????????????????????document.onmouseup = ?function(){ ???????????????document.onmousemove = document.onmouseup = null; ???????????}; ???????????????????????return false; ???????????????????}; ???????????};</script></head><body><div id=‘div1‘> ???<div id=‘div2‘> ???</div></div><div id=‘content1‘> ???<div id=‘content2‘> ????yy1<br /> yyl<br /> yy2<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy3<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy100<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy200<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy400<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> ????yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy500<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yyl<br /> yy900<br /> ???</div></div></body></html>js 模拟滚动条
原文地址：https://www.cnblogs.com/moon-yyl/p/8971589.html