自定义滚动条算法 #5
Description
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#main{
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
#img{
position: absolute;
background-image: url(http://noraesae.github.io/perfect-scrollbar/azusa.jpg);
width: 1280px;
height: 720px;
}
.scroller{
position: absolute;
background-color: #aaa;
border-radius: 6px;
opacity: 0.8;
display: none;
width: 5px;
height: 5px;
}
.right-scroller{
top: 0;
right: 0;
}
.bottom-scroller{
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="main">
<div id="img"></div>
<div class="right-scroller scroller"></div>
<div class="bottom-scroller scroller"></div>
</div>
</body>
</html>
<script src="http://127.0.0.1:8080/yysc-crm/static/scripts/libs/jquery-1.11.3.min.js"></script>
<script>
function getDeltaFromEvent(e) {
var deltaX = e.deltaX;
var deltaY = -1 * e.deltaY;
if (typeof deltaX === "undefined" || typeof deltaY === "undefined") {
// OS X Safari
deltaX = -1 * e.wheelDeltaX / 6;
deltaY = e.wheelDeltaY / 6;
}
if (e.deltaMode && e.deltaMode === 1) {
// Firefox in deltaMode 1: Line scrolling
deltaX *= 10;
deltaY *= 10;
}
if (deltaX !== deltaX && deltaY !== deltaY/* NaN checks */) {
// IE in some mouse drivers
deltaX = 0;
deltaY = e.wheelDelta;
}
if (e.shiftKey) {
// reverse axis with shift key
return [-deltaY, -deltaX];
}
return [deltaX, deltaY];
}
var viewH = 500
var viewW = 500
var contentH = 720
var contentW = 1280
var scrollerH = viewH * viewH / contentH
var scrollerW = viewW * viewW / contentW
var mainEl = $('#main').width(viewH).height(viewW)
var imgEl = $('#img')
var rightScroller = $('.right-scroller').height(scrollerH)
var bottomScroller = $('.bottom-scroller').width(scrollerW)
mainEl[0].addEventListener('mousewheel', function (e){
e.stopPropagation()
e.preventDefault()
var delta = getDeltaFromEvent(e)
var deltax = delta[0]
var deltay = delta[1]
var top = parseFloat(imgEl.css('top')) + deltay
top = Math.min(0, Math.max(-contentH + viewH, top))
var left = parseFloat(imgEl.css('left')) - deltax
left = Math.min(0, Math.max(-contentW + viewW, left))
var rightScrollerTop = (viewH - scrollerH) / (contentH - viewH) * -top
var bottomScrollerLeft = (viewW - scrollerW) / (contentW - viewW) * -left
$('.scroller').show()
imgEl.css('top', top)
rightScroller.css('top', rightScrollerTop)
imgEl.css('left', left)
bottomScroller.css('left', bottomScrollerLeft)
}, false)
mainEl
.on('mouseover', function (){
$('.scroller').show()
})
.on('mouseout', function (){
$('.scroller').hide()
})
</script>y轴滚动条思路：
var viewH = 500 //容器高度
var contentH = 1000 //内容高度
var contentTop = 100 //内容的top位置
var scrollerHeight = viewH * viewH / contentH //滚动条高度
var scrollerTop = (viewH - scrollH) / (contentH - viewH) * contentTop //滚动条位置