//滚动条
$(function () {
//文本高度
var contentH = $('.content').height();
//可视高度
var viewH = $('.talent-theory-border').height();
//滚动条高度
var scrollH = $('.scrollbar').height();
//滑块高度
var sliderH = viewH/contentH*scrollH;
var sliderDistence = 0;
$('.scrollbar p').css('height', sliderH+'px' );
// 滚动事件
$('.talent-theory-border').on('scroll',function() {
//文本滚动距离
var scrollTop = $('.talent-theory-border').scrollTop();
//滑块滚动距离
sliderDistence = scrollTop/(contentH-viewH)*(scrollH-sliderH);
// console.log(scrollTop)
$('.scrollbar p').css('top', sliderDistence+'px' );
});
//点击事件
$('.scrollbar').click(function(event) {
// console.log(sliderDistence);
var move = 20;
if (event.offsetY > sliderDistence + sliderH) {
$('.scrollbar p').css('top', sliderDistence+move+'px' );
sliderDistence = sliderDistence + move;
} else if( event.offsetY < sliderDistence){
$('.scrollbar p').css('top', sliderDistence-move+'px' );
sliderDistence = sliderDistence - move;
}
$('.talent-theory-border').scrollTop(sliderDistence/(scrollH-sliderH)*(contentH-viewH))
});
// 拖拽
// var drag = false;
$('.scrollbar p').mousedown(function(e) {
// drag = true;
var startY = e.offsetY;
console.log(startY);
$(document).mousemove(function(e) {
// if (drag) {
var moveY = e.offsetY;
var dValue = moveY-startY;
var mouseH = sliderDistence+dValue;
if ( mouseH <= 0) {
mouseH = 0;
} else if (mouseH >= scrollH - sliderH){
mouseH = scrollH - sliderH;
}
$('.scrollbar p').css('top', mouseH+'px' );
$('.talent-theory-border').scrollTop(mouseH/(scrollH-sliderH)*(contentH-viewH));
// }
});
$(document).mouseup(function(e){
// drag = false;
$(document).off('mousemove');
$(document).off('mouseup');
});
return false;
});
})
jq自定义滚动条
猜你喜欢
转载自blog.csdn.net/weixin_42595284/article/details/82795254
今日推荐
周排行