应用边框半径时，无法在 Chrome 中抓取水平文本区域滚动条

Posted 2023-05-07

【中文标题】应用边框半径时，无法在 Chrome 中抓取水平文本区域滚动条

【英文标题】：Horizontal textarea scrollbar can't be grabbed in Chrome when border-radius is applied

【发布时间】：2016-11-22 05:30:50

【问题描述】：

https://jsfiddle.net/h4myo11L/4/

<textarea wrap="off" rows="5" style="border-radius: 4px">aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaabbbbbbbbb
</textarea>

滚动到文本框的中间 尝试用鼠标抓取水平滚动条 你不能，它是一个文本光标，它在栏后面闪烁！

删除边框半径样式并重复：现在您可以抓住水平滚动条。一旦滚动到最底部，它也会开始工作。

在 Firefox 中运行良好。我使用 wrap 属性而不是 CSS，因为它是唯一的跨浏览器兼容方式，包括 IE11 (html Textarea horizontal scroll)。使用 CSS 导致在 IE11 中按下返回键以生成空格而不是换行符。

有没有办法在 Chrome 中解决这个问题？

编辑：在 Chrome 52 中修复的错误

【问题讨论】：

我认为您可以将其报告为 chrome 社区中的错误。我认为他们可以修复它support.google.com/chrome/answer/95315?hl=en

我可能会。我只是想知道是否有解决此问题的方法，因为我迫不及待地等待 Chrome 出现并修复它。

添加 textareaposition: relative; 这似乎解决了它

在 Chrome 版本 51.0.2704.106 m Win10 上运行正常。

我只是在没有边界半径的情况下发生了这种情况

【参考方案1】：

正如我在评论中所说的 position:relative; 修复了滚动条的问题。

您可以尝试的另一个选项是将border 设置为none，然后使用box-shadow 来获得接近相同的效果

我在这个小提琴中包含了三个示例来尝试不同的选项：https://jsfiddle.net/p6jw6qvf/

#one
    border: none;
    box-shadow: 0 0 5px 2px #9a9a9a;


#two
    position: relative;
    border-radius: 4px;

注意：如果您使用选项#two，这会将滚动条定位在顶部并使其位于边框上方查看图像，要解决此问题，您可以使用自定义滚动条将边框半径添加到滚动条本身。

【参考方案2】：

• 选项 1：

我以前也遇到过同样的问题，我想出了一个不是最专业的解决方案，但对我来说很有效。

首先，将您的 textarea 包裹在 div 中，并为您的 div 设置以下属性：

div 
    border: 1px solid rgb(169,169,169);  /* The default color for the textearea's border */
    border-radius: 4px;                /* The border-radius you had on the text area */
    overflow: hidden;                /* To prevent the textarea's edges from overflowing */
    display: inline-block;       /* To ensure the div's border wraps around the textarea */

然后，删除 textarea 的边框并设置 vertical-align: top 以摆脱那种 padding-bottom存在于带有 display: inline-block 的元素中。像这样：

textarea 
    vertical-align: top; /* To remove the small gap that exists in inline-block elements */
    border: 0;    /* To remove the border from the textarea */

正如我一开始所说的，我不认为这是一个非常专业的方法和此错误的替代方法，但结果在视觉上与 textarea 相同> 在你的小提琴中。但是，谨慎使用它，因为它可能会在某些情况下出现意外行为。

工作小提琴： → here.

片段：

div 
  border: 1px solid rgb(169, 169, 169);
  border-radius: 4px;
  overflow: none;
  display: inline-block;


textarea 
  vertical-align: top;
  overflow-x: visible;
  border: 0;

<div>
  <textarea wrap="off" rows="5">aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbb
    IT'S 2016 AND I CANT EVEN HAVE A HORIZONTAL SCROLLBAR ON A TEXTBOX.
  </textarea>
</div>

---

• 选项 2：

经过一些测试，我发现出于某种原因，将 position: relative 设置为 textarea 似乎也解决了问题 strong>，至少在我的 Chrome 版本中，但是如果您想使用其他类型的定位，上面的就可以了。

【讨论】：

这是一个天才的 hack，但我认为我永远不会使用它，只是觉得太脏了。相对定位似乎确实有效，我认为它可能是正确的解决方案，因为它可以在大多数情况下毫无问题地使用。现在谢谢你。

很高兴我能帮助@cen :)

你的意思是overflow: hidden？