Багги Scrollbar Поведение

Question

Я пытаюсь реализовать макет содержимого с возможностью прокрутки, и мне удалось это сделать, однако полоса прокрутки отображает странное поведение - иногда на нее нельзя нажимать, иногда стрелки не перемещают ее, иногда может перемещаться только 1 стрелка даже если есть место для прокрутки в любом направлении, et c ..

.content-wrapper {
  display: flex;
  justify-content: center;
  overflow-y: scroll;
  flex-grow: 1;
  /* for Firefox */
  min-height: 0;
}

.tsp-content {
  display: flex;
  flex-direction: column;
}

<div class="content-wrapper">
  <div class="tsp-content">
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root transportation-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
    <div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded">
      <div class="MuiCardContent-root">
        <p>Lorem -&gt; Ipsum (0328)</p>
      </div>
      <div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button>
      </div>
    </div>
    <br>
  </div>
</div>

Вот кодовая ручка: https://codepen.io/JustM/pen/PoqGNGP

Answer 1

Ваша проблема в том, что <img class="path"/> находится сверху прокручиваемого содержимого, поэтому оно не прокручивается.

Я добавил z-index: 0; в .path и z-index:1; в .content-wrapper и это сработало.

Вы можете проверить это здесь https://codepen.io/remyjouni/pen/JjdRKxb

Я настоятельно рекомендую любые виды форм фона, которые будут добавлены в CSS в качестве фона .