رفتن به مطلب

آموزش ایجاد اسکرول نرم - Smooth Scroll


پست های پیشنهاد شده

سلام

یکسری دوستان ازم خواسته بودند که یک کد بهتری واسه ایجاد اسکرول نرم بذارم که تمامی مرورگر ها رو ساپورت کنه و سبک باشه .

که از گیت ها این کد رو پیدا کردم و واقعا فوق العادست در واقع این کد شبیه ساز اسکرول نرم مرورگر فایر فاکس هستش .

فقط کافیه کدهای زیر رو قبل از تگ <body/> کپی کنید و یا اگر فایل کتابخانه js دارید میتونید داخل اون قرار بدید بدون هیچ مشکلی کار میکنه .


<script type="text/javascript">

(function(){var D={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:true,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:true,arrowScroll:50,touchpadSupport:true,fixedBackground:true,excluded:""};var t=D;var r=false;var p=false;var h={x:0,y:0};var b=false;var v=document.documentElement;var d;var x;var G=[120,120,120];var o={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36};var t=D;function J(){var K=false;if(K){a("keydown",s)}if(t.keyboardSupport&&!K){f("keydown",s)}}function E(){if(!document.body){return}var K=document.body;var L=document.documentElement;var Q=window.innerHeight;var N=K.scrollHeight;v=(document.compatMode.indexOf("CSS")>=0)?L:K;d=K;J();b=true;if(top!=self){p=true}else{if(N>Q&&(K.offsetHeight<=Q||L.offsetHeight<=Q)){var P=false;var M=function(){if(!P&&L.scrollHeight!=document.height){P=true;setTimeout(function(){L.style.height=document.height+"px";P=false},500)}};L.style.height="auto";setTimeout(M,10);if(v.offsetHeight<=Q){var O=document.createElement("div");O.style.clear="both";K.appendChild(O)}}}if(!t.fixedBackground&&!r){K.style.backgroundAttachment="scroll";L.style.backgroundAttachment="scroll"}}var z=[];var g=false;var m=+new Date;function F(N,M,R,O){O||(O=1000);w(M,R);if(t.accelerationMax!=1){var K=+new Date;var S=K-m;if(S<t.accelerationDelta){var P=(1+(30/S))/2;if(P>1){P=Math.min(P,t.accelerationMax);M*=P;R*=P}}m=+new Date}z.push({x:M,y:R,lastX:(M<0)?0.99:-0.99,lastY:(R<0)?0.99:-0.99,start:+new Date});if(g){return}var Q=(N===document.body);var L=function(U){var T=+new Date;var ab=0;var aa=0;for(var W=0;W<z.length;W++){var ad=z[W];var ac=T-ad.start;var V=(ac>=t.animationTime);var X=(V)?1:ac/t.animationTime;if(t.pulseAlgorithm){X=j(X)}var Z=(ad.x*X-ad.lastX)>>0;var Y=(ad.y*X-ad.lastY)>>0;ab+=Z;aa+=Y;ad.lastX+=Z;ad.lastY+=Y;if(V){z.splice(W,1);W--}}if(Q){window.scrollBy(ab,aa)}else{if(ab){N.scrollLeft+=ab}if(aa){N.scrollTop+=aa}}if(!M&&!R){z=[]}if(z.length){A(L,N,(O/t.frameRate+1))}else{g=false}};A(L,N,0);g=true}function l(N){if(!{E()}var O=N.target;var M=B(O);if(!M||N.defaultPrevented||k(d,"embed")||(k(O,"embed")&&/\.pdf/i.test(O.src))){return true}var L=N.wheelDeltaX||0;var K=N.wheelDeltaY||0;if(!L&&!K){K=N.wheelDelta||0}if(!t.touchpadSupport&&I(K)){return true}if(Math.abs(L)>1.2){L*=t.stepSize/120}if(Math.abs(K)>1.2){K*=t.stepSize/120}F(M,-L,-K);N.preventDefault()}function s(L){var Q=L.target;var O=L.ctrlKey||L.altKey||L.metaKey||(L.shiftKey&&L.keyCode!==o.spacebar);if(/input|textarea|select|embed/i.test(Q.nodeName)||Q.isContentEditable||L.defaultPrevented||O){return true}if(k(Q,"button")&&L.keyCode===o.spacebar){return true}var M,S=0,R=0;var N=B(d);var P=N.clientHeight;if(N==document.body){P=window.innerHeight}switch(L.keyCode){case o.up:R=-t.arrowScroll;break;case o.down:R=t.arrowScroll;break;case o.spacebar:M=L.shiftKey?1:-1;R=-M*P*0.9;break;case o.pageup:R=-P*0.9;break;case o.pagedown:R=P*0.9;break;case o.home:R=-N.scrollTop;break;case o.end:var K=N.scrollHeight-N.scrollTop-P;R=(K>0)?K+10:0;break;case o.left:S=-t.arrowScroll;break;case o.right:S=t.arrowScroll;break;default:return true}F(N,S,R);L.preventDefault()}function n(K){d=K.target}var i={};setInterval(function(){i={}},10*1000);var u=(function(){var K=0;return function(L){return L.uniqueID||(L.uniqueID=K++)}})();function c(L,K){for(var M=L.length;M--{i[u(L[M])]=K}return K}function B(N){var L=[];var K=v.scrollHeight;do{var M=i[u(N)];if(M){return c(L,M)}L.push(N);if(K===N.scrollHeight){if(!p||v.clientHeight+10<K){return c(L,document.body)}}else{if(N.clientHeight+10<N.scrollHeight){overflow=getComputedStyle(N,"").getPropertyValue("overflow-y");if(overflow==="scroll"||overflow==="auto"){return c(L,N)}}}}while(N=N.parentNode)}function f(M,L,K){window.addEventListener(M,L,(K||false))}function a(M,L,K){window.removeEventListener(M,L,(K||false))}function k(L,K){return(L.nodeName||"").toLowerCase()===K.toLowerCase()}function w(K,L){K=(K>0)?1:-1;L=(L>0)?1:-1;if(h.x!==K||h.y!==L){h.x=K;h.y=L;z=[];m=0}}var e;function I(K){if(!K){return}K=Math.abs(K);G.push(K);G.shift();clearTimeout(e);var L=(q(G[0],120)&&q(G[1],120)&&q(G[2],120));return !L}function q(L,K){return(Math.floor(L/K)==L/K)}var A=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(M,L,K){window.setTimeout(M,K||(1000/60))}})();function C(K){var M,N,L;K=K*t.pulseScale;if(K<1){M=K-(1-Math.exp(-K))}else{N=Math.exp(-1);K-=1;L=1-Math.exp(-K);M=N+(L*(1-N))}return M*t.pulseNormalize}function j(K){if(K>=1){return 1}if(K<=0){return 0}if(t.pulseNormalize==1){t.pulseNormalize/=C(1)}return C(K)}var H=/chrome/i.test(window.navigator.userAgent);var y=null;if("onwheel" in document.createElement("div")){y="wheel"}else{if("onmousewheel" in document.createElement("div")){y="mousewheel"}}if(y&&H){f(y,l);f("mousedown",n);f("load",E)}})();

</script>

منبع : https://gist.github.com/galambalazs/6477177

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...