問題是這樣的:自己寫的自定義滾動條,用鼠標點擊滾動塊滾動時會選擇內(nèi)容????????????????????? 用鼠標滑輪滾動,則會滾動主頁面。代碼放在下面,我覺得你們應(yīng)該。。??床幌氯サ?,求在自定義滾動條有經(jīng)驗的同學(xué)老師幫助,如果對問題不清楚可以與我私聊,我給你們看視頻。感謝!<div?class="scroll-b">
<div?class="box">
<div?class="meg-b">
<div?class="meg">1</div>
。。。。。(省略一下)
<div?class="meg">50</div>
</div>
</div>
<div?class="scr-b">
<div?class="scroll"></div>
</div>
</div>下面是JS代碼,我是用JQuery寫的,你們看了可能真的會很頭疼的!$(function(){
var?downY,moveY,scroll_h=$(".scroll").outerHeight(),meg_num=10,scrollY=$(".scroll").position().top,meg_last=$(".meg:last").outerHeight();
var?meg_height=$(".meg:last").position().top+meg_last-$(".scroll-b").height();
var?src_innerh=$(".scr-b").innerHeight()-scroll_h;
$(".scroll").mousedown(function(e){
downY=e.pageY;
scrollY=$(this).position().top;
$("html").mousemove(function(e){
moveY=e.pageY;
src_top=moveY-downY+scrollY;
if(src_top>=0&&src_top<=src_innerh){
$(".scroll").css("top",src_top+"px");
$(".meg-b").css("top",-(src_top/src_innerh*meg_height)+"px");?
}
});
$("html").mouseup(function(){
$(this).unbind("mousemove");
});
});
//?$(".scroll-b")[0].onmousewheel=function(e){
//? if(e.wheelDelta<0){
//? if(scrollY+$(".scroll").outerHeight()*0.3<=src_innerh){
//? $(".scroll").css("top",scrollY+$(".scroll").outerHeight()*0.3+"px");
//? scrollY=$(".scroll").position().top;
//? $(".meg-b").css("top",-(scrollY/src_innerh*meg_height)+"px");
//? }else{
//? $(".scroll").css("top",src_innerh);
//? scrollY=$(".scroll").position().top;
//? $(".meg-b").css("top",-(scrollY/src_innerh*meg_height)+"px");
//? }
//? }else{
//? if(scrollY-$(".scroll").outerHeight()*0.3>=0){
//? $(".scroll").css("top",scrollY-$(".scroll").outerHeight()*0.3+"px");
//? scrollY=$(".scroll").position().top;
//? $(".meg-b").css("top",-(scrollY/src_innerh*meg_height)+"px");
//? }else{
//? $(".scroll").css("top",0);
//? scrollY=$(".scroll").position().top;
//? $(".meg-b").css("top",0);
//? }
//? }
//?}
$(".scroll-b").on("mousewheel",function(e){
if(e.originalEvent.wheelDelta<0){
if(scrollY+$(".scroll").outerHeight()*0.3<=src_innerh){
$(".scroll").css("top",scrollY+$(".scroll").outerHeight()*0.3+"px");
scrollY=$(".scroll").position().top;
$(".meg-b").css("top",-(scrollY/src_innerh*meg_height)+"px");
//?$(".meg-b").scrollTop(-(scrollY/src_innerh*meg_height));
}else{
$(".scroll").css("top",src_innerh);
scrollY=$(".scroll").position().top;
$(".meg-b").css("top",-(scrollY/src_innerh*meg_height)+"px");
//?$(".meg-b").scrollTop(-(scrollY/src_innerh*meg_height));
}
}else{
if(scrollY-$(".scroll").outerHeight()*0.3>=0){
$(".scroll").css("top",scrollY-$(".scroll").outerHeight()*0.3+"px");
scrollY=$(".scroll").position().top;
$(".meg-b").css("top",-(scrollY/src_innerh*meg_height)+"px");
//?$(".meg-b").scrollTop(-(scrollY/src_innerh*meg_height));
}else{
$(".scroll").css("top",0);
scrollY=$(".scroll").position().top;
$(".meg-b").css("top",0);
//?$(".meg-b").scrollTop(0);
}
}
});
$("a").click(function(){
$(".meg-b").prepend('<div?class="meg">#1</div>');
$(".scroll").css("top",0);
$(".meg-b").css("top",0);
scrollY=$(".scroll").position().top;
meg_height=$(".meg:last").position().top+$(".meg:last").outerHeight()-$(".scroll-b").height();
});
});
自定義滾動條無法正常使用,求解?
LiuYina
2018-02-02 00:28:46