问题是这样的:自己写的自定义滚动条,用鼠标点击滚动块滚动时会选择内容
用鼠标滑轮滚动,则会滚动主页面。
代码放在下面,我觉得你们应该。。。看不下去的,求在自定义滚动条有经验的同学老师帮助,如果对问题不清楚可以与我私聊,我给你们看视频。感谢!
<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(); }); });
慕设计2395807