رفتن به مطلب
Alireza Xn

آموزش ایجاد اسکرول نرم - 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 قرار دهید.


  • مطالب مشابه

    • توسط Black_Sky
      با سلام خدمت دوستان
      در این آموزش قصد دارم درباره زبان جاوا اسکریپت آموزش بدم
      این آموزش نوع آموزش ها در فضای مجازی بسیار وجود دارد اما قرار هست تفاوت های بسیاری وجود داشته باشد
      خب ابتدا :
      1-در این تاپیک اسپم ندهید و یا سوال نفرمایید /سوال و جواب در تاپیک جداگانه مطرح کنید تا بقیه دوستان استفاده کنند
      2-آموزش ها پیوسته میباشند و در آخر به صورت یک فایل PDF در اختیار دوستان قرار میگیرد
      3-یک سری پیش نیاز هم لازم هست همانند : HTML
      4-اگر هر نوع پیشنهاد و یا انتقادی هم وجود دارد با بنده در ارتباط باشید
      5-دوستانی هم که میخواهند در این تاپیک همکاری کنند اعلام نمایند
      --------------------
      موفق باشید
      ---------------------
    • توسط madish
      سلام وقت بخیر یه سوال داشتم اگر بتونین کمک کنید ممنون میشم
      ببینید من یه لیست باز شو شرطی میخام که بدون دکمه تایید یا ارسال باشه بع این صورت که کاربر وقتی لیست رو باز کرد روی هر گزینه کلیک کرد یه لینک براش باز شه
      ساده تر میتونم بگم
      لیست شرطی که بلافاصله از انتخاب (بدون دکمه تایید یا ارسال) یه لینک جدید باز شه
      مث صفحه اصلی سایت اچاره با یه تفاوت های ریز
      اینو چطور میتونم با وردپرس پیاده کنم ؟
      افزونه یا چیزی هست ؟
      ممنون میشم راهنمایی کنین
    • توسط mory_fun
      سلام دوستان
      یک دامین جدید برای سایتم ادد کردم و بقیه رو به این شکل ریدایرکت کردم درسته ؟
      RewriteEngine on RewriteCond %{HTTP_HOST} ^www.old.ir [NC,OR] RewriteCond %{HTTP_HOST} ^old.ir [NC] RewriteCond %{HTTP_HOST} ^www.new.xyz [NC] RewriteRule ^(.*)$ http://new.xyz/$1 [L,R=301,NC]  
    • توسط naderi
      سلام .. برای توسعه یک وب سایت با قالب Eduma وردپرس میخوایم یه سری قابلیت ها رو بهش اضافه کنیم .. از دوستان کسی هست که بتونه به ما کمک کنه؟
    • توسط s.m.a1383
      سلام می خواستم ببینم به جای اینکه محصولات رو توی صفحه اول سایت بگذارم میشه دسته های محصولات رو توی صفحه اول سایت گذاشت؟
      آدرس سایت من:innolabs.ir
      در ضمن از پوسته "هستیا "استفاده میکنم افزونه یا کدی هست که بتونه به جای نمایش محصولات در صفحه اول دسته های محصولات رو نمایش بده در ضمن هر کد یا افزونه ای که گفتید طریقه انجامش رو هم بگید لطفا.
      خیلی ممنون از لطفتون
×
×
  • اضافه کردن...