带水平滚动条的textarea如何设置右侧内边距？

当textarea开启水平滚动（overflow-x: scroll）且强制文本不换行（white-space: pre）时，CSS的padding属性仅在初始可见区域的右上角生效，滚动后内容会紧贴textarea的右边缘，右侧内边距无法作用于滚动后的内容。

方案1：外层容器包裹法（兼容性最优） #

将原本给textarea的边框、内边距转移到外层容器上，textarea自身占满容器空间，容器的内边距会始终包裹textarea的内容，包括滚动后的右侧区域。

示例代码：

.textarea-container {
  border: 1px solid black;
  padding: 0.75rem;
  width: 14rem;
  height: 5rem;
  box-sizing: border-box; /* 避免padding撑开容器宽度 */
}

.textarea-container textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
  resize: none; /* 可选，禁止调整textarea大小 */
}

<div class="textarea-container">
  <textarea>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</textarea>
</div>

方案2：自定义滚动条模拟（仅webkit内核浏览器） #

如果不想添加额外容器，可以通过自定义webkit滚动条的轨道位置，模拟右侧内边距效果，但该方法仅支持Chrome、Safari等webkit系浏览器。

示例代码：

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
  border: 1px solid black;
  height: 5rem;
  width: 14rem;
  padding: 0.75rem;
  padding-right: 1.5rem; /* 预留滚动条与内容的间距 */
}

/* 调整滚动条轨道位置，模拟右侧内边距 */
textarea::-webkit-scrollbar {
  width: 0.75rem;
}

textarea::-webkit-scrollbar-track {
  margin-right: 0.75rem;
}

内容的提问来源于stack exchange，提问作者Basj