防止滚动条溢出 - CSS

Question

好的，所以我的意思用这张图片更好地表达了-

我希望滚动条 不会出现在容器之外。 由于 border-radius，滚动条似乎会消失超出容器的尺寸。

我想出的一个解决方案是制作容器 overflow: hidden 并在其中使用另一个可滚动的 div，并将一些 padding 应用于可滚动的 div。

.parent {
  overflow: hidden;
}
.scrollable {
  overflow: scroll;
  padding: 20px;
}

但是好像不影响滚动条，即使我设置了box-sizing: content-box。

如何防止这种情况发生？

Answer 1

添加overflow: hidden;隐藏水平和垂直滚动条。

body { 
  overflow: hidden; /* Hide scrollbars */ 
}

body { 
  overflow-y: hidden; /* Hide vertical scrollbar */ 
  overflow-x: hidden; /* Hide horizontal scrollbar */ 
}

/* Hide scrollbar for Chrome, Safari and Opera */ 
.example::-webkit-scrollbar { }

Answer 2

所以我通过对可滚动容器使用 margin 而不是 padding 来解决它。不知道为什么我之前没有想到它:-|

防止滚动条溢出 - CSS

Prevent Scrollbar from overflow - CSS

css

layout

scrollbar