$$plugins.define('scrollShadowHor', function (element, options) { var scrollElm = element.querySelector('.scrollbar'), listInner = element.querySelector('.scrollbar__inner'); const observer = new MutationObserver(function(mutations) { var childrenMutations = mutations.filter((x) => x.type === "childList"); if (childrenMutations.length > 0){ checkScrollPos(scrollElm); } }); observer.observe(listInner, { subtree: true, childList: true }); checkScrollPos(scrollElm); scrollElm.addEventListener("scroll", function () { checkScrollPos(this); }); function checkScrollPos(scrollContainer) { if (scrollContainer.scrollLeft + element.offsetWidth > listInner.offsetWidth - 8) { element.classList.add('scrollbarShadow--right'); } else { element.classList.remove('scrollbarShadow--right'); } if (scrollContainer.scrollLeft < 8) { element.classList.add('scrollbarShadow--left'); } else { element.classList.remove('scrollbarShadow--left'); } } //checkScrollInit(); //function checkScrollInit() { // if (element.offsetWidth >= listInner.offsetWidth) { // element.classList.add('scrollbarShadow--noScroll'); // } else { // element.classList.remove('scrollbarShadow--noScroll'); // } //} });