basic-ui-js/basic/scroll-bar.min.js

A lightweight JavaScript library for building web-based applications with simple code. No need to write HTML or CSS — just use basic JavaScript.

"use strict";const ScrollBar=function(o={}){const e=startBox();e.props({scrollableBox:null,bar_border:0,bar_round:3,bar_borderColor:"rgba(0, 0, 0, 1)",bar_width:4,bar_mouseOverWidth:8,bar_mouseOverColor:"#141414",bar_opacity:.6,bar_mouseOverOpacity:.6,bar_padding:2,bar_color:"#141414",neverHide:0},o);let l=null;const r=function(){e.setTimeoutVar&&clearTimeout(e.setTimeoutVar),e.setTimeoutVar=setTimeout((function(){1==e.mouseMoving?r():0==e.neverHide&&(e.boxScrollBarTop.opacity=0)}),3e3)},c=function(){e.setTimeoutVar&&clearTimeout(e.setTimeoutVar)};e.refreshScroll=function(){e.scrollableBox.containerBox.add(e),e.width=e.scrollableBox.width,e.height=e.scrollableBox.height,e.aline(e.scrollableBox);const o=e.scrollableBox.elem.scrollLeft,l=e.scrollableBox.elem.clientWidth,c=e.scrollableBox.elem.scrollWidth,t=l/c;e.boxScrollBarLeft.left=o*t+2*e.bar_width,e.boxScrollBarLeft.width=l*t-4*e.bar_width,c==l||0==e.scrollableBox.scrollX?0!=e.neverHide&&c!=l||(e.boxScrollBarLeft.visible=0):1==e.scrollableBox.scrollX&&(e.boxScrollBarLeft.visible=1);const a=e.scrollableBox.elem.scrollTop,i=e.scrollableBox.elem.clientHeight,s=e.scrollableBox.elem.scrollHeight,b=i/s;e.boxScrollBarTop.top=a*b+2*e.bar_width,e.boxScrollBarTop.height=i*b-4*e.bar_width,s==i||0==e.scrollableBox.scrollY?0!=e.neverHide&&s!=i||(e.boxScrollBarTop.visible=0):1==e.scrollableBox.scrollY&&(e.boxScrollBarTop.visible=1),r()};const t=function(o){e.mouseMoving=1;const l=e.scrollableBox.elem.clientWidth,c=e.scrollableBox.elem.scrollWidth/l;if(0!=e.mouseX&&1==e.boxScrollBarLeft.clicked){const l=o.clientX-e.mouseX;e.scrollableBox.elem.scrollLeft+=l*c}const t=e.scrollableBox.elem.clientHeight,a=e.scrollableBox.elem.scrollHeight/t;if(0!=e.mouseY&&1==e.boxScrollBarTop.clicked){const l=o.clientY-e.mouseY;e.scrollableBox.elem.scrollTop+=l*a}e.mouseX=o.clientX,e.mouseY=o.clientY,r()};e.color="transparent",e.setMotion("opacity 0.2s"),e.boxScrollBarTop=Box({right:e.bar_padding,border:e.bar_border,borderColor:e.bar_borderColor,round:e.bar_round,width:e.bar_width,color:e.bar_color,opacity:e.bar_opacity}),e.boxScrollBarTop.setMotion("width 0.2s, opacity 0.5s"),e.boxScrollBarLeft=Box({bottom:e.bar_padding,border:e.bar_border,borderColor:e.bar_borderColor,round:e.bar_round,height:e.bar_width,color:e.bar_color,opacity:e.bar_opacity}),e.boxScrollBarLeft.setMotion("height 0.2s, opacity 0.5s"),endBox(),e.refreshScroll(),e.scrollableBox.onResize(e.refreshScroll),e.scrollableBox.elem.addEventListener("scroll",e.refreshScroll),e.boxScrollBarTop.clickable=1,e.boxScrollBarLeft.clickable=1;const a=function(){e.boxScrollBarTop.width=e.bar_width,e.boxScrollBarTop.color=e.bar_color,e.boxScrollBarTop.opacity=e.bar_opacity};e.boxScrollBarTop.elem.addEventListener("mouseover",(function(o){e.boxScrollBarTop.width=e.bar_mouseOverWidth,e.boxScrollBarTop.color=e.bar_mouseOverColor,e.boxScrollBarTop.opacity=e.bar_mouseOverOpacity,c()})),e.boxScrollBarTop.elem.addEventListener("mouseout",(function(o){1!=e.boxScrollBarTop.clicked&&(a(),r())}));const i=function(){e.boxScrollBarLeft.height=e.bar_width,e.boxScrollBarLeft.color=e.bar_color,e.boxScrollBarLeft.opacity=e.bar_opacity};e.boxScrollBarLeft.elem.addEventListener("mouseover",(function(o){e.boxScrollBarLeft.height=e.bar_mouseOverWidth,e.boxScrollBarLeft.color=e.bar_mouseOverColor,e.boxScrollBarLeft.opacity=e.bar_mouseOverOpacity,c()})),e.boxScrollBarLeft.elem.addEventListener("mouseout",(function(o){1!=e.boxScrollBarLeft.clicked&&(i(),r())})),e.scrollableBox.elem.addEventListener("mouseover",(function(o){e.boxScrollBarTop.opacity=e.bar_opacity,e.boxScrollBarLeft.opacity=e.bar_opacity,r()})),e.scrollableBox.elem.addEventListener("mouseleave",(function(o){e.mouseDownForScrolling=0,r()}));const s=function(){e.mouseX=0,e.mouseY=0,l=Box(0,0,"100%","100%",{color:"transparent",clickable:1}),page.add(that),l.elem.addEventListener("mousemove",t);const o=function(){e.mouseMoving=0,e.boxScrollBarLeft.clicked=0,e.boxScrollBarTop.clicked=0,r(),a(),i(),l.remove()};l.elem.addEventListener("mouseup",(function(e){o()})),l.elem.addEventListener("mouseleave",(function(e){o()}))};e.boxScrollBarTop.elem.addEventListener("mousedown",(function(o){e.boxScrollBarTop.clicked=1,s()})),e.boxScrollBarLeft.elem.addEventListener("mousedown",(function(o){e.boxScrollBarLeft.clicked=1,s()}));const b=e.scrollableBox.elem;let n=b.scrollHeight;return new MutationObserver((o=>{o.forEach((o=>{n!==b.scrollHeight&&(e.refreshScroll(),n=b.scrollHeight)}))})).observe(b,{childList:!0,subtree:!0,characterData:!0}),makeBasicObject(e),e};