only-scrollbar
Version:
1 lines • 7.86 kB
JavaScript
((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,()=>{var s={617:(t,i)=>{Object.defineProperty(i,"__esModule",{value:!0}),i.MARGIN_ERROR=i.IS_TOUCH_DEVICE=i.DEFAULT_OPTIONS=void 0,i.DEFAULT_OPTIONS={damping:1,speed:1,axis:"Y",listenAxis:"Y",anchors:{offset:0,stopPropagation:!1,active:!0,type:"native"}},i.IS_TOUCH_DEVICE=!!navigator.maxTouchPoints,i.MARGIN_ERROR=3},974:(t,i)=>{Object.defineProperty(i,"__esModule",{value:!0}),i.getFieldsByAxis=i.emit=i.findElementBySelector=void 0;i.findElementBySelector=t=>{var i;return t===window||t===document.scrollingElement?null!=(i=document.scrollingElement)?i:document.body:"string"==typeof t?document.querySelector(t):null},i.emit=(t,i)=>{i=new CustomEvent(i);t.dispatchEvent(i)};i.getFieldsByAxis=(t,i)=>({scrollOffset:"Y"===t?"scrollTop":"scrollLeft",scrollSize:"Y"===t?"scrollHeight":"scrollWidth",clientSize:"Y"===t?"clientHeight":"clientWidth",offset:"Y"===t?"top":"left",delta:"Y"===i?"deltaY":"deltaX"})}},e={};function n(t){var i=e[t];return void 0!==i||(i=e[t]={exports:{}},s[t](i,i.exports,n)),i.exports}var i={};{let t=i,o=n(974),s=n(617);class r{constructor(t,i=s.DEFAULT_OPTIONS){this.handleCustomAnchors=t=>{var i=t.target.closest(`[${r.Attributes.anchor}]`);i&&(i=i.getAttribute(r.Attributes.anchor),i=`[${r.Attributes.anchorId}="${i}"]`,i=this.options.anchors.root.querySelector(i))&&(t.preventDefault(),this.options.anchors.stopPropagation&&t.stopPropagation(),this.scrollIntoView(i,this.options.anchors.offset))},this.handleNativeAnchors=t=>{this.stop();var i,s=t.target;s instanceof HTMLAnchorElement&&(i=document.getElementById(s.hash.substring(1)))&&(t.preventDefault(),this.options.anchors.stopPropagation&&t.stopPropagation(),this.scrollIntoView(i,this.options.anchors.offset),window.location.hash=s.hash)},this.onScroll=t=>{this.isLocked||(this.isStart=!1,this.isEnd=!1,this.checkSyncTo(),this.updateDirection())},this.onWheel=t=>{t.ctrlKey||(t.preventDefault(),this.isLocked)||(this.setTargetPosition(t),this.overscrollPropagation(t),null===this.rafID&&requestAnimationFrame(this.onFirstTick))},this.tick=t=>{var i=t-this.prevTickTime,t=(this.prevTickTime=t,1-Math.exp(60*-this.options.damping*i*.001)),i=+(this.position+t*(this.targetPosition-this.position));this.lastPosition=this.position,this.lastPosition===i?this.stop():(this.position=i,this.setValue(i),this.rafID=requestAnimationFrame(this.tick))},this.onFirstTick=t=>{this.prevTickTime=t,this.isScrolling=!0,this.scrollContainer.classList.add(r.ClassNames.scrolling),(0,o.emit)(this.eventContainer,r.Events.start),null===this.rafID&&(this.rafID=requestAnimationFrame(this.tick))};var t=(0,o.findElementBySelector)(t);if(!t)throw new Error("scrollElement does not exist");this.scrollContainer=t;var t=null!=(t=(0,o.findElementBySelector)(null==i?void 0:i.eventContainer))?t:this.scrollContainer;this.eventContainer=t===document.scrollingElement?window:t,this.position=0,this.targetPosition=0,this.lastPosition=0,this.prevTickTime=0,this.lastDirection=null,this.isLocked=!1,this.isEnd=!1,this.isStart=!0,this.isScrolling=!1,this.rafID=null,this.options={anchors:Object.assign(Object.assign(Object.assign({},s.DEFAULT_OPTIONS.anchors),{root:this.scrollContainer}),null!=(t=i.anchors)?t:{}),speed:null!=(t=null==i?void 0:i.speed)?t:s.DEFAULT_OPTIONS.speed,eventContainer:this.eventContainer,axis:null!=(t=null==i?void 0:i.axis)?t:s.DEFAULT_OPTIONS.axis,listenAxis:null!=(t=null!=(t=null==i?void 0:i.listenAxis)?t:null==i?void 0:i.axis)?t:s.DEFAULT_OPTIONS.listenAxis,damping:.1*(null!=(t=null==i?void 0:i.damping)?t:s.DEFAULT_OPTIONS.damping)},this.fields=(0,o.getFieldsByAxis)(this.options.axis,this.options.listenAxis),this.stop=this.stop.bind(this),this.init()}get direction(){return Math.sign(this.position-this.lastPosition)||this.lastDirection||-1}stop(){this.sync(),this.syncTo&&clearTimeout(this.syncTo),"number"==typeof this.rafID&&(cancelAnimationFrame(this.rafID),this.rafID=null),this.isScrolling=!1,this.scrollContainer.classList.remove(r.ClassNames.scrolling),(0,o.emit)(this.eventContainer,r.Events.stop),this.checkEdges()}scrollTo(t){t!==this.position&&(this.stop(),s.IS_TOUCH_DEVICE?this.scrollContainer.scrollTo({[this.fields.offset]:t,behavior:"smooth"}):(this.targetPosition=t,requestAnimationFrame(this.onFirstTick)))}scrollIntoView(t,i=0){t=this.position+t.getBoundingClientRect()[this.fields.offset]-i;this.scrollTo(t)}setValue(t){this.scrollContainer[this.fields.scrollOffset]=t}lock(){this.isLocked||(this.scrollContainer.style.overflow="hidden",this.scrollContainer.classList.add(r.ClassNames.lock),this.removeEventListener("wheel",this.onWheel),this.isLocked=!0,this.stop())}unlock(){this.isLocked&&(this.scrollContainer.style.overflow="auto",this.scrollContainer.classList.remove(r.ClassNames.lock),this.addEventListener("wheel",this.onWheel,{passive:!1}),this.isLocked=!1,null===this.rafID)&&requestAnimationFrame(this.onFirstTick)}addEventListener(t,i,s){this.eventContainer.addEventListener(t,i,s)}removeEventListener(t,i){this.eventContainer.removeEventListener(t,i)}destroy(){this.unlock(),this.syncTo&&clearTimeout(this.syncTo),this.rafID=null,this.scrollContainer.style.removeProperty("overflow"),this.scrollContainer.classList.remove(...Object.values(r.ClassNames)),this.scrollContainer.removeAttribute(r.Attributes.direction),(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.setAttribute(r.Attributes.direction,"back"),this.sync(),this.initEvents()}initEvents(){var t;(this.scrollContainer===document.documentElement?window:this.scrollContainer).addEventListener("scroll",this.onScroll,{passive:!0}),this.addEventListener("wheel",this.onWheel,{passive:!1}),this.options.anchors.active&&(t="native"===this.options.anchors.type?this.handleNativeAnchors:this.handleCustomAnchors,this.options.anchors.root.addEventListener("click",t))}overscrollPropagation(t){this.isStart&&this.targetPosition<this.position||this.isEnd&&this.targetPosition>this.position||t.stopPropagation()}wheelCalculate(t,i){let s=t[this.fields.delta];return t.deltaMode&&(t=1===t.deltaMode?40:800,s*=t),s*=i}setTargetPosition(t){t=this.wheelCalculate(t,this.options.speed);this.targetPosition=Math.max(Math.min(this.targetPosition+t,this.scrollContainer[this.fields.scrollSize]-this.scrollContainer[this.fields.clientSize]+s.MARGIN_ERROR),-s.MARGIN_ERROR)}updateDirection(){var t=this.direction;t!==this.lastDirection&&(this.lastDirection=t,this.toggleDirectionAttr(t),(0,o.emit)(this.eventContainer,r.Events.change))}toggleDirectionAttr(t){this.scrollContainer.setAttribute(r.Attributes.direction,t<0?"back":"forward")}sync(){var t=this.scrollContainer[this.fields.scrollOffset];this.targetPosition=t,this.lastPosition=t,this.position=t}checkSyncTo(){this.syncTo&&clearTimeout(this.syncTo),this.syncTo=setTimeout(this.stop,200)}checkEdges(){var t,i,s,e;this.isEnd||this.isStart||({[this.fields.scrollOffset]:t,[this.fields.clientSize]:i,[this.fields.scrollSize]:s}=this.scrollContainer,(e=0===t)?(this.isStart=e,(0,o.emit)(this.eventContainer,r.Events.reachStart)):(e=s-i===t)&&(this.isEnd=e,(0,o.emit)(this.eventContainer,r.Events.reachEnd)))}}r.ClassNames={container:"os-container",lock:"os-container--locked",scrolling:"os-container--scrolling"},r.Attributes={anchor:"data-os-anchor",anchorId:"data-os-anchor-id",direction:"data-os-direction"},r.Events={start:"os:start",stop:"os:stop",change:"os:change",reachEnd:"os:reachEnd",reachStart:"os:reachStart",lock:"os:lock",unlock:"os:unlock"},t.default=r}return i.default});