как остановить прокрутку по горизонтали после рендеринга последнего элемента в динамическом массиве объектов

Question

когда я нажимаю стрелку вправо после того, как конец массива отображается на экране, тогда прокрутка влево выполняется только после щелчка левой стрелки, столько раз, сколько нажала стрелка вправо.горизонтальная прокрутка при нажатии на кнопку.

 goToPreviousSlide(e) {
        // this.scrollW = this.scrollW ? this.scrollW - window.innerWidth : 0;
        // this._root.getElementById('list').scroll(this.scrollW, 0);
        if (window.innerWidth > 992) {
        this.scrollW = this.scrollW ? this.scrollW - 750 : 0;
        this._root.getElementById('list').scroll(this.scrollW, 0);
        } else if (window.innerWidth > 600) {
        this.scrollW = this.scrollW ? this.scrollW - 500 : 0;
        this._root.getElementById('list').scroll(this.scrollW, 0);
        } else {
        this.scrollW = this.scrollW ? this.scrollW - 300 : 0;
        this._root.getElementById('list').scroll(this.scrollW, 0);
        }
        }

        goToNextSlide(e) {
        var last = this.products.slice(-1)[0]
        console.log(last)
        var isInViewport = function (last) {
        var bounding = last.getBoundingClientRect();
        return (
          bounding.top >= 0 &&
          bounding.left >= 0 &&
          bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
        };
        console.log(isInViewport)
        console.log(this.scrollW)
        if(!isInViewport){
        if (window.innerWidth > 992) {
        this.scrollW = this.scrollW ? this.scrollW + 750 : 750;
        this._root.getElementById('list').scroll(this.scrollW, 0);
        } else if (window.innerWidth > 600) {
        this.scrollW = this.scrollW ? this.scrollW + 450 : 450;
        this._root.getElementById('list').scroll(this.scrollW, 0)
        } else {
        this.scrollW = this.scrollW ? this.scrollW + 300 : 300;
        this._root.getElementById('list').scroll(this.scrollW, 0)
        }
        }
        }
 





        

  <div class="layout horizontal nowrap" id="list">
          ${repeat(this.products, (i) => i.productId, (i, index) => html`
            <div class="card" id="prods">
              <genie-product-card class="prdt" theme="${this.theme}" filters=${this.filters}  on-GG:giftPinned="${event => this.pinProduct(event)}" on-GG:giftUnPinned="${event => this.unPinProduct(event)}" id$="${i.productId}" pinBtn="${this.pinBtn}" containerHover="${this.containerHover}" productDetails = "${i}"></genie-product-card>
            </div>
          `)}
          </div>