only-scrollbar/dist/onlyScrollbar.js

smooth-scroll

!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?exports.OnlyScroll=i():t.OnlyScroll=i()}(this,()=>(()=>{"use strict";var o={d:(t,i)=>{for(var s in i)o.o(i,s)&&!o.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:i[s]})},o:(t,i)=>Object.prototype.hasOwnProperty.call(t,i)},t={};o.d(t,{default:()=>i});const s=t=>t!==window&&t!==document.scrollingElement?"string"==typeof t?document.querySelector<HTMLElement>t:t:document.scrollingElement??document.body,e=t=>{let i=t.deltaY,s=t.deltaX;return t.deltaMode&&(t=1===t.deltaMode?40:800,s*=t,i*=t),{x:s,y:i}},n=(t,i)=>{i=new CustomEvent(i);t.dispatchEvent(i)},l={damping:1,mode:"vertical"},a={vertical:function(){this.easedPosition={x:0,y:+((1-this.damping)*this.easedPosition.y+this.damping*this.targetPosition.y).toFixed(2)},this.scrollContainer.scrollTop=Math.round(this.easedPosition.y),this.lastPosition.y===this.easedPosition.y?this.rafID=null:(this.lastPosition=this.easedPosition,this.rafID=requestAnimationFrame(this.tick))},horizontal:function(){this.easedPosition={x:+((1-this.damping)*this.easedPosition.x+this.damping*this.targetPosition.x).toFixed(2),y:0},this.scrollContainer.scrollLeft=Math.round(this.easedPosition.x),this.lastPosition.x===this.easedPosition.x?this.rafID=null:(this.lastPosition=this.easedPosition,this.rafID=requestAnimationFrame(this.tick))},free:function(){this.easedPosition={x:+((1-this.damping)*this.easedPosition.x+this.damping*this.targetPosition.x).toFixed(2),y:+((1-this.damping)*this.easedPosition.y+this.damping*this.targetPosition.y).toFixed(2)},this.scrollContainer.scrollTop=Math.round(this.easedPosition.y),this.scrollContainer.scrollLeft=Math.round(this.easedPosition.x),this.lastPosition.y===this.easedPosition.y&&this.lastPosition.x===this.easedPosition.x?this.rafID=null:(this.lastPosition=this.easedPosition,this.rafID=requestAnimationFrame(this.tick))}},r={vertical:function(t){t=e(t).y;this.targetPosition={x:0,y:Math.max(Math.min(this.targetPosition.y+t,this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight),0)}},horizontal:function(t){t=e(t).x;this.targetPosition={x:Math.max(Math.min(this.targetPosition.x+t,this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth),0),y:0}},free:function(t){var{x:t,y:i}=e(t);this.targetPosition={x:Math.max(Math.min(this.targetPosition.x+t,this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth),0),y:Math.max(Math.min(this.targetPosition.y+i,this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight),0)}}};const i=class h{static classNames={container:"only-scroll-container",lock:"only-scroll--is-locked"};scrollContainer;eventContainer;isLocked;position;targetPosition;easedPosition;lastPosition;mode;damping;syncTo;rafID;lastDirection;lastHash;isDisable;setTargetPosition;tick;constructor(t,i){if(!(t=s(t)))throw new Error("scrollElement does not exist");this.scrollContainer=t,t=s(i?.eventContainer)??this.scrollContainer,this.eventContainer=t===document.scrollingElement?window:t,this.position={x:0,y:0},this.targetPosition={x:0,y:0},this.easedPosition={x:0,y:0},this.lastPosition={x:0,y:0},this.lastDirection=null,this.isLocked=!1,this.rafID=null,this.damping=.1*(i?.damping??l.damping),this.mode=i?.mode??l.mode,this.lastHash=window.location.hash,this.isDisable=!1,this.setTargetPosition=r[this.mode].bind(this),this.tick=a[this.mode].bind(this),this.init()}get direction(){var t=Math.sign(this.position.y-this.lastPosition.y),i=Math.sign(this.position.x-this.lastPosition.x);return{y:0!==t?t:this.lastDirection?.y??-1,x:0!==i?i:this.lastDirection?.x??-1}}updateDirection(){this.lastPosition=this.position,this.position={x:this.scrollContainer.scrollLeft,y:this.scrollContainer.scrollTop};var{x:t,y:i}=this.direction;t!==this.lastDirection?.x&&(this.scrollContainer.dataset.scrollDirectionX=1!==t?"left":"right",n(this.eventContainer,"changeDirectionX")),i!==this.lastDirection?.y&&(this.scrollContainer.dataset.scrollDirectionY=1!==i?"up":"down",n(this.eventContainer,"changeDirectionY")),this.lastDirection={x:t,y:i}}sync(){this.syncPos(),this.rafID=null}scrollTo({x:t,y:i}){i===this.position.y&&t===this.position.x||(navigator.maxTouchPoints?this.scrollContainer.scrollTo({left:t,top:i,behavior:"smooth"}):(this.targetPosition={x:t??this.position.x,y:i??this.position.y},this.rafID=requestAnimationFrame(this.tick)))}setValue({x:t,y:i}){this.scrollContainer.scrollTop=i??this.position.y,this.scrollContainer.scrollLeft=t??this.position.x}lock(){this.isLocked||(this.scrollContainer.style.overflow="hidden",this.scrollContainer.classList.add(h.classNames.lock),this.removeEventListener("wheel",this.onWheel),this.isLocked=!0,this.sync())}unlock(){this.isLocked&&(this.scrollContainer.style.overflow="auto",this.scrollContainer.classList.remove(h.classNames.lock),this.addEventListener("wheel",this.onWheel,{passive:!1}),this.isLocked=!1,null===this.rafID)&&(this.rafID=requestAnimationFrame(this.tick))}addEventListener(t,i,s){this.eventContainer.addEventListener(t,i,s)}removeEventListener(t,i){this.eventContainer.removeEventListener(t,i)}destroy(){this.syncTo&&clearTimeout(this.syncTo),this.rafID=null,this.scrollContainer.style.removeProperty("overflow"),this.scrollContainer.classList.remove(...Object.values(h.classNames)),this.scrollContainer.removeAttribute("data-scroll-direction-x"),this.scrollContainer.removeAttribute("data-scroll-direction-y"),(this.scrollContainer===document.documentElement?window:this.scrollContainer).removeEventListener("scroll",this.onScroll),this.eventContainer.removeEventListener("wheel",this.onWheel)}init(){this.scrollContainer.style.overflow="auto",this.scrollContainer.style.scrollBehavior="auto",this.scrollContainer.dataset.scrollDirectionY="up",this.scrollContainer.dataset.scrollDirectionX="left",this.scrollContainer.classList.add(h.classNames.container),this.initEvents()}initEvents(){(this.scrollContainer===document.documentElement?window:this.scrollContainer).addEventListener("scroll",this.onScroll,{passive:!0}),this.addEventListener("wheel",this.onWheel,{passive:!1})}onScroll=()=>{this.isLocked||this.isDisable||(this.updateDirection(),window.location.hash!==this.lastHash?(this.lastHash=window.location.hash,this.syncPos()):this.checkSyncTo())};onWheel=t=>{t.ctrlKey||(t.preventDefault(),this.isLocked)||(this.manageParentScrollbars(t.target),this.isDisable)||(this.setTargetPosition(t),null===this.rafID&&(this.rafID=requestAnimationFrame(this.tick)))};syncPos(){var t={y:this.scrollContainer.scrollTop,x:this.scrollContainer.scrollLeft};this.easedPosition=t,this.targetPosition=t,this.lastPosition=t,this.position=t}stop(){cancelAnimationFrame(this.rafID)}checkSyncTo(){this.syncTo&&clearTimeout(this.syncTo),this.syncTo=setTimeout(()=>{n(this.eventContainer,"scrollEnd"),this.sync()},200)}manageParentScrollbars(t){t.closest("."+h.classNames.container)?.isSameNode(this.scrollContainer)?this.isDisable&&this.enable():this.isDisable||this.disable()}disable(){this.isDisable=!0,this.sync()}enable(){this.isDisable=!1,this.sync()}};return t.default})());