css 隐藏A元素上的滚动条，但在B元素上显示它

pbwdgjma 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(122)

我有一个HTML页面，其中一个块包含另一个块。我需要在块A上显示滚动条，而我想在块B上隐藏滚动条，但它仍然是可滚动的，就像删除滚动条的背景一样。（块B位于块A内）
但实际上，我无法隐藏滚动条，在我的代码顶部，我需要全局声明这个，因为它在其他一些块中使用（哪个块A需要）

::-webkit-scrollbar {
    width: 10px;
    border-radius: 0 10px 0 0;
    background-color: #fff;
    box-shadow: inset 0 0 5px rgba(0,0,0,.5);
  }

以下是我尝试过的方法：
1.重写元素中的滚动条

.myElement {
  ::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
  }
}

1.使用scrollbar-color

.myElement {
  scrollbar-color : transparent;
}

1.使用scrollbar-width

.myElement {
  scrollbar-width : none;
}

但是这些东西没有一个能用。有没有人有过同样的经历？请让我知道你们是怎么解决的，伙计们

1条答案

你的1.解是正确的，但有一些小的改动。
从这里开始

.myElement {
  ::-webkit-scrollbar {
    /*anything you want to do*/
  }
}

到这个

.myElement::-webkit-scrollbar {
    /*anything you want to do*/
}