Chrome左侧滚动div右侧的未知填充

Question

我有一张桌子，里面有一些内容。单击按钮时内容会增加。当溢出时，我设法在右侧添加了滚动。一切正常。当我将滚动条更改为左侧时，div outer-wrapper的右侧会有未知的填充。仅当检查并悬停在dom元素上时，才会看到该问题。该问题仅在Chrome中出现。我已经使用mozilla进行了测试，并且可以正常工作。

<div class="test-container">
  <div class="outer-wrapper">
    <div class="inner-wrapper">
      <table class="table">
        <tr>
          <td class="content-box">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <button type="button" id="click-me">
  Click Me to Fill
  </button>
</div>

问题出在outer-wrapper上。它显示了检查时权限的未知扩展。

这里是fiddle

这是问题的屏幕截图

Answer 1

您可以使用overflow-y: overlay;-仅适用于WebKit浏览器，这意味着视口将具有相同的宽度而无需滚动

$('#click-me').click(function(){
	$('.table .content-box').append('<p>test</p>');
});

.test-container{
  width:100%;
  border:1px solid lightgray;
  height:530px;
  overflow:hidden;
}
.outer-wrapper{
  border:1px solid lightgray;
  height:530px;
  width:320px;
  overflow-y:auto;
  overflow-y:overlay;
  box-sizing:border-box;
  display:inline-block;
  direction:rtl;
}
.inner-wrapper{
  width:290px;
  direction:ltr;
  /* border:1px solid yellow; */
}
button{
  display:inline-block;
  width:30%;
  margin-left:50px;
  margin-top:10px;
  /* text-align:right; */
  vertical-align:top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="test-container">
  <div class="outer-wrapper">
    <div class="inner-wrapper">
      <table class="table">
        <tr>
          <td class="content-box">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <button type="button" id="click-me">
  Click Me to Fill
  </button>
</div>

Answer 2

如果将外包装的方向从rtl更改为ltr，似乎可以解决此问题。

问题可能是由rtl / ltr不一致引起的吗？