jquery插件：jquery.mousewheel.js
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<style>
.styledSelect {
width:410px;
height:295px;
margin:0 auto;
overflow:hidden;
position:relative;
}
.contentBox {
width:400px;
line-height:20px;
font-family:'宋体';
font-size:12px;
position:absolute;
top:0px;
}
.contentBox p{
text-indent: 24px;
margin:0;
padding:0;
}
.barClass{
right: 2px;
width: 2px;
background:#000;
}
.barSpanClass{
width:6px;
background: #000;
right:-2px;
}
</style>
</head>
<body>
<div class="styledSelect" id="styledSelect">
<div class="contentBox" id="contentBox">
<p> 11有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 22有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 33有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 44有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 55有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 66有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 77有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 88有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 99有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
<p> 00有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。有限公司全面负责管理运营。
有限公司全面负责管理运营。有限公司全面负责管理运营。</p>
</div>
</div>
<div id="t"></div>
</body>
<script>
// 设置元素样式
function setStyle(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
//模拟滚动条
function scrollFun(innerDiv){
var outDiv = innerDiv.get(0).parentNode;
$(outDiv).attr('position','relative');
$(innerDiv).attr('position','absolute');
var barClass = 'barClass';
var barSpanClass = 'barSpanClass';
var barHeight = $(outDiv).height();
var allHeight = innerDiv.height();
scaleY = allHeight/barHeight;
barSpanHeight = (barHeight/allHeight)*barHeight;
scrollHeight = barHeight-barSpanHeight;
var barBg = document.createElement('div');
barBgNode = {
position: 'absolute',
height: barHeight + 'px',
top: '0px'
}
setStyle(barBg,barBgNode);
$(barBg).addClass('barClass');
outDiv.appendChild(barBg);
var barSpan = document.createElement('div');
barBgSpan = {
position: 'absolute',
height: barSpanHeight + 'px',
top: '0px',
cursor: 'pointer'
}
setStyle(barSpan, barBgSpan);
$(barSpan).addClass('barSpanClass');
barBg.appendChild(barSpan);
var _isClick = false;
var disY=0;
$(barSpan).mousedown(function(e){
_isClick = true;
var disY = e.clientY-$(barSpan).offset().top;
$(document).mousemove(function(e){
if(_isClick==true){
//鼠标移动时不选中文本;
if (document.selection && document.selection.empty) {
document.selection.empty();
}else if (window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
var barSpanTop = e.clientY-disY;
$(barSpan).css('top', barSpanTop+'px');
var barBgTop = barSpanTop*scaleY;
$(innerDiv).css('top', -barBgTop+'px');
checkTop()
return false;
}
})
$(document).mouseup(function(e){
_isClick = false;
return false;
})
})
$(document).mouseup(function(e){
_isClick = false;
return false;
})
innerDiv.mousewheel(function(event, delta){
var barBgTop = delta*20;
var barSpanTop = -barBgTop/scaleY;
$(innerDiv).css('top', parseInt($(innerDiv).css('top'))+barBgTop);
$(barSpan).css('top', parseInt($(barSpan).css('top'))+barSpanTop);
checkTop();
})
function checkTop(){
if(parseInt($(barSpan).css('top'))<0){
$(barSpan).css('top','0px');
}else if(parseInt($(barSpan).css('top'))>scrollHeight){
$(barSpan).css('top',scrollHeight+'px');
}
if(parseInt($(innerDiv).css('top'))>0){
$(innerDiv).css('top','0px');
}else if(parseInt($(innerDiv).css('top'))<(barHeight-allHeight)){
$(innerDiv).css('top',(barHeight-allHeight)+'px');
}
}
}
var innerDiv = $('#contentBox');
scrollFun(innerDiv);
</script>
</html>
相关推荐
js 模拟滚动条js 模拟滚动条js 模拟滚动条js 模拟滚动条
js模拟滚动条,相当好用,让你的滚动条变得绚丽!
很好用的模拟滚动条，jq的，里面有demo，样式很多
jQuery实现模拟滚动条插件版
04-模拟滚动条.html
11-模拟滚动条.html
09-模拟滚动条.html
10-模拟滚动条.html
simScroll插件使用图片模拟滚动条，个人觉得从功能上来说已接近完美了，不过还是有点东西要完善的。就目前来说它支持的功能有： 1、上下按钮、滚动区域，支持切换快速滚动;遗憾的地方：滚动区域翻页滚动时，当...
javascript 模拟 滚动条 能动态添加内容
应一个朋友之邀，他说用vb的时间空间来控制一个滚动条的增长...本程序没有使用MFC，倒是十分简单，就是设置一个timer，然后定时处理“滚动条”，我也没有使用真正的滚动条，而是根据朋友的要求，自己用矩形模拟了一个。
IE浏览器，div模拟滚动条，div宽度小于18 滚动条不滚动 环境 win7 IE 10 代码： 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>scroll</title> <meta http-equiv=”...
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。 代码未整理，...
js模拟滚动条(横向竖向)，需要的朋友可以参考一下
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。
易语言滚动条模拟法换肤源码,滚动条模拟法换肤,初始化模拟滚动条,置颜色方案,列表框_子类化,列表框_消息处理,安装鼠标钩子,卸载鼠标钩子,列表框_WM_NCPAINT,CallWinProc,拷贝内存,取矩形,取类名,申请内存,释放内存,...
C#180滚动条示例 源代码