javascript - overflow-x : hidden doesn't work, 而是在滚动时在右侧添加填充

Question

我正在使用 position: fixed 用于模态框(position: fixed 用于显示深色背景的外部容器，position: absolute 用于模态框)，如下面的 css 中所述。我添加了 overflow-y: auto 和 overflow-x: hidden 到模式框，但是当滚动开始时，即当内容溢出时，右下角会出现一个额外的填充(如下面的 gif 所示)。我想避免这种填充。我该怎么办？

谢谢。

模态框的内联 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

编辑:

对于帖子中的所有错误，我们深表歉意。我包括问题的 js fiddle 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);
 }