Question

我使用的位置：固定为模态框（位置：固定为外部容器，显示深色背景和位置：模态框的绝对值），如下面的CSS所述。我已经在模式框中添加了overflow-y：auto和overflow-x：hidden，但是当滚动开始时，即当内容溢出时，右下角会出现一个额外的填充（如下面的gif所示）。我想避免这种填充。我该怎么办？

感谢。

Modal Box的内联CSS：

background:'#ccc',
zIndex:100,
padding:"20px",
borderRadius:"3px",
border:"1px solid #eee",
boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
transition: "0.3s",
paddingTop:"55px",
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
maxHeight : '85%',
marginTop: "35px", 
overflowY : "auto",
overflowX: "hidden",
width : "60%",
verticalAlign: "top",
minHeight : "70%",
transform : 'translate(-50%, -50%)',
position:"absolute"

外部黑暗背景的内联CSS

position : 'fixed',
{top : 0,
left : 0,
right : 0,
bottom : 0,
zIndex: 19,
background: 'rgba(0, 0, 0, 0.5)'

As seen in the image, no padding is present initially. But when the text overflows, padding is added in the form of the white square box in the bottom right corner

编辑：

对不起该帖子中的所有错误。我提出问题https://jsfiddle.net/kbsfph91的一个小问题。另外，我想出了确切的问题。问题是我在我的模态框中使用了contentEditable div，当内容溢出时，填充发生是因为滚动条应该出现，但它们不会出现。因此，出现的空白区域是不可见的滚动条（滚动工作）。所以我的问题应该是如何让滚动条可见？

Answer 1

这个css代码通过隐藏滚动条解决了我的问题。

::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 0px;
  }

::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
   box-shadow: 0 0 1px rgba(255,255,255,.5);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
 }

overflow-x：隐藏不起作用，而是在滚动时在右侧添加填充

1 个答案: