时间戳

首页 > 解决方案 > 错误的滚动条行为

html - 错误的滚动条行为

问题描述

我正在尝试实现可滚动的内容布局并且我设法做到了，但是滚动条显示出奇怪的行为-有时无法单击它，有时箭头不移动它，有时即使只有 1 个箭头可以移动它有空间可以向任一方向滚动，等等。

.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

标签： htmlcssscrollflexboxscrollbar

解决方案

你的问题是它位于<img class="path"/>可滚动内容的顶部，所以这就是它不会滚动的原因。

我添加z-index: 0;到.path和z-index:1;到.content-wrapper并且它起作用了。

你可以在这里查看 https://codepen.io/remyjouni/pen/JjdRKxb

我强烈建议在 CSS 中添加任何类型的背景形状作为背景。

推荐阅读