оптемезируй Javascript не трогая html          
    <div class="chapters__container">
      <header class="chapters-header">
        <button class="chapters__button"></button>
        <div class="chapters-caption">
          <h3 class="chapters-caption__subtitle">主菜单</h3>
          <h2 class="chapters-caption__title">剧情历史</h2>
        </div>
      </header>
      <main class="chapters">
        <div class="chapters__character chapters_character__first" 
         data-page="./bin/js_page/map/mini" 
         data-loader-top="Загрузка Страницы 2" 
         data-loader-bottom="Подготовка данных...."
         tabindex="0" 
         role="button">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
        <div class="chapters_character chapters_character__second">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
        <div class="chapters_character chapters_character__third">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
        <div class="chapters_character chapters_character__forth">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
        <div class="chapters_character chapters_character__fifth">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
        <div class="chapters_character chapters_character__sixth">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
        <div class="chapters_character chapters_character__seventh">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
        <div class="chapters_character chapters_character__eighth">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
      </main>
      <footer class="chapters-footer">
        <div class="chapters-footer__container">
          <button class="chapters-footer__button chapters-footer__button_space">
            Space
          </button>
          <p class="chapters-footer__caption">选择</p>
        </div>
        <div class="chapters-footer__container">
          <button
            class="chapters-footer__button chapters-footer__button_left"
          ></button>
          <p class="chapters-footer__caption">向左</p>
        </div>
        <div class="chapters-footer__container">
          <button
            class="chapters-footer__button chapters-footer__button_right"
          ></button>
          <p class="chapters-footer__caption">向右</p>
        </div>
      </footer>
    </div>
 let isDown = false;
                let startX;
                let scrollLeft;

                const containerChapters = document.querySelector(".chapters");
                if (containerChapters) {
                    containerChapters.addEventListener("mousedown", (e) => {
                        isDown = true;
                        startX = e.pageX - containerChapters.offsetLeft;
                        scrollLeft = containerChapters.scrollLeft;
                    });
                    containerChapters.addEventListener("mouseleave", () => {
                        isDown = false;
                    });

                    containerChapters.addEventListener("mouseup", () => {
                        isDown = false;
                    });
                    containerChapters.addEventListener("mousemove", (e) => {
                        if (!isDown) return;
                        e.preventDefault();
                        const x = e.pageX - containerChapters.offsetLeft;
                        const walk = (x - startX) * 1;
                        containerChapters.scrollLeft = scrollLeft - walk;
                    });
                }