[ANSWERED] html – Buggy Scrollbar Behavior

Question 1

your problem is that the <img class="path"/> is on the top of the scrollable content, so that’s why it won’t scroll.

I added z-index: 0; to .path and z-index:1; to .content-wrapper and it worked.

you can check it here
https://codepen.io/remyjouni/pen/JjdRKxb

I highly recommend any kind of background shapes to be added in CSS as a background.

Question 2

I’m trying to implement a scroll-able content layout and I managed to do it, however the scrollbar is displaying strange behavior – sometimes it cannot get clicked, sometimes the arrows do not move it, sometimes only 1 arrow can move it even though there is space to be scrolled in either direction, etc..

.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>

Here’s the codepen: https://codepen.io/JustM/pen/PoqGNGP

Bollate

[ANSWERED] html – Buggy Scrollbar Behavior

By

Solution 1 :

Problem :

Comments

Comment posted by JustM

Comment posted by this

By

Related Post

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate