1 line
2.1 KiB
JavaScript
1 line
2.1 KiB
JavaScript
const scrollBarWidths=40,wrapper=document.getElementsByClassName("wrapper-nav")[0],navLink=document.getElementsByClassName("nav-item nav-link"),lastNavLink=navLink[navLink.length-1],scrollerRight=document.getElementsByClassName("scroller-right")[0],scrollerLeft=document.getElementsByClassName("scroller-left")[0],list=document.querySelectorAll(".list");let btnTriggered=!1,widthOfList=function(){let e=0;return document.querySelectorAll(".list a").forEach(t=>{let l=getOuterWidth(t);e+=l}),e},widthOfHidden=function(e){const t=document.getElementsByClassName("wrapper-nav")[0];e=e||0,oW=getOuterWidth(t)-e;let l=parseFloat((0-oW).toFixed(3)),r=oW-widthOfList()-getLeftPosi()-40,n=document.body.clientWidth-(getOuterLeft(lastNavLink)+getOuterWidth(lastNavLink))-e;return l>r?n>l?n:l:n>r?n:r},getLeftPosi=function(){let e=0-getOuterWidth(wrapper),t=getOuterLeft(list[0]);return e>t?e:t},reAdjust=function(){let e=document.body.clientWidth-(getOuterLeft(lastNavLink)+getOuterWidth(lastNavLink));getOuterWidth(wrapper)<widthOfList()&&e<0?scrollerRight.style.cssText="display: flex":scrollerRight.style.display="none",getLeftPosi()<0?scrollerLeft.style.cssText="display: flex":scrollerLeft.style.display="none",btnTriggered=!1};window.addEventListener("resize",function(e){reAdjust()},!0),scrollerRight.addEventListener("click",function(){if(btnTriggered)return;btnTriggered=!0,fade(scrollerLeft),unfade(scrollerRight);let e=getOuterWidth(scrollerRight);move(document.querySelectorAll(".list")[0]).add("left",+widthOfHidden(e),200).end().then(e=>{reAdjust()})}),scrollerLeft.addEventListener("click",function(){if(btnTriggered)return;btnTriggered=!0,fade(scrollerRight),unfade(scrollerLeft);let e=getOuterWidth(scrollerLeft);move(document.querySelectorAll(".list")[0]).add("left",-getLeftPosi()+e,200).end().then(()=>{reAdjust()})});let getOuterLeft=function(e){return e.getBoundingClientRect().left},getOuterWidth=function(e){return parseFloat(window.getComputedStyle(e).width)};function fade(e){e.style.display="none",e.style.transition="opacity 0.6s",e.style.opacity=0}function unfade(e){e.style.display="block",e.style.transition="opacity 0.6s",e.style.opacity=1}reAdjust(); |