自定义滚动条无法正常使用，求解？

Question

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