自定义滚动条无法正常使用,求解?

问题是这样的:自己写的自定义滚动条,用鼠标点击滚动块滚动时会选择内容

                      用鼠标滑轮滚动,则会滚动主页面。

代码放在下面,我觉得你们应该。。。看不下去的,求在自定义滚动条有经验的同学老师帮助,如果对问题不清楚可以与我私聊,我给你们看视频。感谢!

<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
浏览 1073回答 0
0回答

慕设计2395807

WYNQZPSHXNJLNJFVYHDAIRKGVRMVETDGQZBKZPFOVRNDAOQTDFBKNWUTWLAPFIRBWMZVKUQRHQZPYCETCRNKMPYNEGOYHDXZPLGPXZIYGPRAQFCKGCRUDZVEGNPQZVRGVEUDDSOXTPDSVKNVKSVRHILMIRKZVXNVKAJSBPQTPYAWEHWZEZCRHWETWFBAHJMBRGOEHWKSUKNPYHWMVZUWMVRZBXYHJFUQTPENWZWPXMVYOWSOKMSUKTIQSHEGVRMORNDFOKZCRZVXGWFOXGBXSOETCETWFOJLNJFNWYHDGTOEZIYTCDMCTMSOEOTTZZMKGVLAJSUKNWDZVLUQGVFBEAOETDEMIEVKCEZIYNJYGCLZBKTWFOWMVEWYURBRNTUQNETBEUVLNWFVYUJXAPETJSCIQZVEUODTWLAPKTCSUDGWKHPWMIRGCXAQSNPYUKZBQTWNPFHXGOKTCYHJYBQTILNXUVQZOXAWENQTGIXTPLODZPKFUWGVEGJYHXPRGDZIDTBCSHJRAJMIRLUXFAJFUKETPFHMHQSILTPLHXMBDMCEZCYHXXMCLUDFVXNVVQSOXGVKGDZOWFUWMIEGJDBKFIEGIKADMDSHEAWQZIRTGAJZVXGJFUQSNJYOCKZVLIOBKMVYNCYUXPRNJFUPYMPFTPEZVEGIRHKGOWMIRFVDUKZOKZIRNCLHDZUQTCXNJFOKSUDSOXGCRIRACRHWZIXGPMHDFORGOJMIKIXMIYOKTILAJLTJLTVENQLZOXGCZTCZCRMUXZISAWFCYLNIYIWZORNLIPEADGILIENSACMILGJFCSDSADGWSOXUCXGPFVXMJSVYTVENQSIEURGYHWTIRHXYUKQSUXNJZUWTCSHQGOXTJFIS
打开App,查看更多内容
随时随地看视频慕课网APP