从文本区域中删除滚动条

Question

继我之前关于如何始终在 <textarea> 中看到滚动条的问题（ 将滚动条添加到 </a> ）之后，我现在想知道如何设置它以便在 <code><textarea></code> ，即使文本溢出。要向下滚动，您可以使用箭头键或鼠标在文本中导航。</p> <p>我怎样才能做到这一点？</p> <blockquote> <p>原文由 <a href="https://link.segmentfault.com/?enc=3DLaUFFIxmNtDRq3z%2BPibw%3D%3D.zLdVjvyOtxOMS5L86kodX9V60Sh%2B6f9h1estJs3D%2FJI0fgNWAy%2FGT3a59BTa1eCzujrpe6%2BEQwyJ2P8Cy5oOaRjX8tKQQE8oBhBzoP89ebs%3D" rel="nofollow" target="_blank">user2370460</a> 发布，翻译遵循 CC BY-SA 4.0 许可协议</p> </blockquote> </article><div class="d-flex flex-wrap align-items-center mb-4"><div class="m-n1 d-flex flex-wrap align-items-center"><a class="m-1" href="/site/stackoverflow" target="_blank"><img src="https://avatar-static.segmentfault.com/315/258/3152588376-62ff5cc2ea2d8_huge128" alt="Stack Overflow 翻译" width="24" height="24" style="border-radius:0.1875rem;vertical-align:top"/></a><a href="/t/html" class="m-1 badge-tag ">html</a><a href="/t/scroll" class="m-1 badge-tag ">scroll</a><a href="/t/textarea" class="m-1 badge-tag ">textarea</a><a href="/t/scrollbar" class="m-1 badge-tag ">scrollbar</a><a href="/t/overflow" class="m-1 badge-tag ">overflow</a></div></div><div class="text-secondary font-size-14 d-flex flex-column"><div class="functional-area-bottom d-flex flex-wrap "><button type="button" class="me-2 mb-3 btn btn-primary-100"><i class="far fa-thumbs-up me-1"></i>有用</button><button type="button" class="me-2 mb-3 false btn btn-primary-100"><i class="far fa-flip-horizontal fa-thumbs-down"></i></button><button type="button" class="me-2 mb-3 btn btn-light"><span class="me-1">关注</span><span class="mainLikeNum hidden">0</span></button><button type="button" class="me-2 mb-3 false btn btn-light"><span class="mx-1">收藏</span><span class="mainLikeNum hidden">0</span></button><div class="me-2 mb-3 dropdown"><button type="button" id="react-aria-4" aria-expanded="false" aria-label="分享" class="dropdown-no-angle dropdown-toggle btn btn-light"><i class="far fa-share-nodes"></i></button></div><canvas hidden="" class="qrcode"></canvas></div><div class="d-flex align-items-center justify-content-between right-wrap w-100"><div><button type="button" class="link-secondary question-reply-btn btn-reset btn btn-link btn-sm">回复</button><span class="split-dot"></span><div class="text-secondary font-size-14 d-inline-flex justify-content-between" id="viewsWord" data-viewsword="9">阅读 <!-- -->621<!-- --> </div></div><div class="operation text-end"></div></div></div><div class="lazyload-wrapper "><div class="lazyload-placeholder"></div></div></div></div></div><div id="OA_holder_3" class="OA_holder" style="display:none"></div><div class="mt-4 answer-area card"><div class="d-flex align-items-center justify-content-between bg-transparent card-header"><strong>2<!-- --> <!-- -->个回答</strong><div aria-label="Basic" role="group" class="btn-group"><a role="button" tabindex="0" href="/q/1010000043093177?sort=votes" class="btn btn-secondary btn-sm">得票</a><a role="button" tabindex="0" href="/q/1010000043093177?sort=newest" class="btn btn-outline-secondary btn-sm">最新</a></div></div><div class="list-group list-group-flush"><div class="p-0 stack-overflow-site list-group-item"><div class="p-3 answer-accept"><div class="commentUnit"><div class="information mb-3 font-size-14"><div class="d-flex align-items-center"><div class="d-flex"><div class="d-flex align-items-center "><a href="https://segmentfault.com/a/1190000042203704" class="d-flex align-items-center me-1"><div style="width:32px;height:32px;background:#6F42C1" class="rounded-circle d-flex align-items-center justify-content-center me-2"><i class="far fa-book-open text-white"></i></div><div class="d-flex flex-column"><div><strong class="align-self-center" itemProp="name">社区维基</strong><i class="far fa-globe text-warning ms-1"></i></div><span style="color:#BF7158;font-weight:bold">1</span></div></a></div><div class="vertical-divider"></div><div><a href="/q/1010000043093177/a-1020000043093181/revision" class="link-secondary"><time itemProp="dateCreated" dateTime="2022-12-15T09:48:55.000Z">发布于 <br/> <!-- -->2022-12-15 </time></a></div></div></div><span class="mt-3 me-2 badge rounded-pill bg-success">✓ 已被采纳</span></div><article id="1020000043093181" class="article fmt article-content"><p>尝试以下操作，不确定哪个适用于所有浏览器或您正在使用的浏览器，但最好全部尝试：</p> <pre><code> <textarea style="overflow:auto"></textarea> </code></pre> <p>或者</p> <pre><code><textarea style="overflow:hidden"></textarea> </code></pre> <p>…如上所述</p> <p>您也可以尝试添加这个，我以前从未使用过它，今天才在网站上看到它：</p> <pre><code> <textarea style="resize:none"></textarea> </code></pre> <p>最后一个选项将删除调整 <code>textarea</code> 大小的能力。您可以在 <a href="https://link.segmentfault.com/?enc=dyEQEE%2BugH3e%2BVTU5MxGFA%3D%3D.R%2BNf1bs%2FBZEGAR28WIeizY8sdLCQ%2BYz0p41NJaCRqayLDYQZTbfqeiHZntnTlcaMwfHSaXUCaU0AFMlrfzl3yw%3D%3D" rel="nofollow" target="_blank">此处</a> 找到有关 CSS <code>resize</code> 属性的更多信息</p> <blockquote> <p>原文由 <a href="https://link.segmentfault.com/?enc=hHQmXfWtBPHa4j10qhF2dg%3D%3D.MR8da0zhKv%2BryCsLvu0QGUBFmOTDChznUfEBXO301nLToNtWfn%2B4vDGO0IqDoalXyJiDs%2FH4uXPtjkSFgw72bw61WdBRaT7ER6yA7ngybYF8xLi8sEVFffpnkYp%2Bt6nA" rel="nofollow" target="_blank">tinthetub</a> 发布，翻译遵循 CC BY-SA 3.0 许可协议</p> </blockquote> </article><div class="text-secondary font-size-14"><div class="d-flex"><div class="functional-area-bottom d-flex flex-wrap "><button type="button" class="me-2 mb-3 btn btn-primary-100"><i class="far fa-thumbs-up me-1"></i>有用</button><button type="button" class="me-2 mb-3 false btn btn-primary-100"><i class="far fa-flip-horizontal fa-thumbs-down"></i></button></div></div><div class="d-flex justify-content-between align-items-center flex-fill"><div class="sflex-center"><button type="button" class="btn-reset link-secondary question-reply-btn btn btn-link">回复</button></div><div class="operation text-end"></div></div></div></div><div class="lazyload-wrapper "><div class="lazyload-placeholder"></div></div></div></div><div class="p-0 stack-overflow-site list-group-item"><div class="p-3 "><div class="commentUnit"><div class="information mb-3 font-size-14"><div class="d-flex align-items-center"><div class="d-flex"><div class="d-flex align-items-center "><a href="https://segmentfault.com/a/1190000042203704" class="d-flex align-items-center me-1"><div style="width:32px;height:32px;background:#6F42C1" class="rounded-circle d-flex align-items-center justify-content-center me-2"><i class="far fa-book-open text-white"></i></div><div class="d-flex flex-column"><div><strong class="align-self-center" itemProp="name">社区维基</strong><i class="far fa-globe text-warning ms-1"></i></div><span style="color:#BF7158;font-weight:bold">1</span></div></a></div><div class="vertical-divider"></div><div><a href="/q/1010000043093177/a-1020000043093179/revision" class="link-secondary"><time itemProp="dateCreated" dateTime="2022-12-15T09:48:55.000Z">发布于 <br/> <!-- -->2022-12-15 </time></a></div></div></div></div><article id="1020000043093179" class="article fmt article-content"><p><code>style="overflow: hidden"</code> 和 <code>style="resize: none"</code> 是成功的。</p> <blockquote> <p>原文由 <a href="https://link.segmentfault.com/?enc=h6GrjU%2BJpocTETY9JRCK%2BQ%3D%3D.pOo6OH0Zv8jV2%2FvUuW3GnWJ4yL7QoYNRTuua2oQ5bYgeVzwdhhZawg%2B9lDV4i87q21d1Pl2tvlIEA%2BdU7GAMNnF4oC7h67hLBI4Fffdn8wN1HjpJxGGHScnV6IkzFlJd" rel="nofollow" target="_blank">Dinder Logic</a> 发布，翻译遵循 CC BY-SA 3.0 许可协议</p> </blockquote> </article><div class="text-secondary font-size-14"><div class="d-flex"><div class="functional-area-bottom d-flex flex-wrap "><button type="button" class="me-2 mb-3 btn btn-primary-100"><i class="far fa-thumbs-up me-1"></i>有用</button><button type="button" class="me-2 mb-3 false btn btn-primary-100"><i class="far fa-flip-horizontal fa-thumbs-down"></i></button></div></div><div class="d-flex justify-content-between align-items-center flex-fill"><div class="sflex-center"><button type="button" class="btn-reset link-secondary question-reply-btn btn btn-link">回复</button></div><div class="operation text-end"></div></div></div></div><div class="lazyload-wrapper "><div class="lazyload-placeholder"></div></div></div></div></div></div><div id="answer-question" style="width:100%" class="mt-4 card"><div class="bg-transparent d-flex justify-content-between align-items-center card-header"><strong>撰写回答</strong><div></div></div><div class="card-body"><h6>你尚未登录，登录后可以</h6><ul class="list-inline"><li class="card-text"><i class="far fa-circle-check me-2 text-success"></i>和开发者交流问题的细节</li><li><i class="far fa-circle-check me-2 text-success"></i>关注并接收问题和回答的更新提醒</li><li><i class="far fa-circle-check me-2 text-success"></i>参与内容的编辑和改进，让解决方法与时俱进</li></ul><div><button type="button" class="me-2 require-login btn btn-primary">注册登录</button></div></div></div><div class="mt-4 card"><div class="bg-transparent card-header"><strong>推荐问题</strong></div><ul class="list-group list-group-flush"><li class="py-3 list-group-item list-group-item-action"><a href="/q/1010000046405137?utm_source=sf-similar-question" target="_blank"><h5 class="text-break text-body">问一个鼠标滚动事件，这种是怎么实现的？</h5><div class="text-secondary text-truncate-1 font-size-14 mb-2">我看到了deepseek官网的这个按钮，鼠标放上去，还是可以滚动页面，这个是怎么做的？我研究了一下deepseek官网的支持，而通义千问的却不可以。</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">2<!-- --> 回答</span><span class="split-dot"></span><span>1.5k<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li><li class="py-3 list-group-item list-group-item-action"><a href="/q/1010000046280498?utm_source=sf-similar-question" target="_blank"><h5 class="text-break text-body">如何在CSS中实现滚动条不溢出圆角框？</h5><div class="text-secondary text-truncate-1 font-size-14 mb-2">请问css如何实现滚动条在外侧滚动框的下一层？我最近在设计一个小插件，里面有一个换肤的小弹窗，小弹窗里还有一个小框，在这个小框里加了滚动条，小框为了美化做了border-radius，然后为这个框自定义了::webkit-scrollbar伪类，但是我发现这个滚动条会溢出这个框，很不好看，下图为现在的效果：我想做到上下的滚动条可...</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">2<!-- --> 回答</span><span class="split-dot"></span><span>1.3k<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li><li class="py-3 list-group-item list-group-item-action"><a href="/q/1010000046499098?utm_source=sf-similar-question" target="_blank"><h5 class="text-break text-body">form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？</h5><div class="text-secondary text-truncate-1 font-size-14 mb-2">{代码...} {代码...} 这种基于name直接读取dom元素的写法，兼容性如何？有无标准说明？</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">2<!-- --> 回答</span><span class="split-dot"></span><span>912<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li><li class="py-3 list-group-item list-group-item-action"><a href="/q/1010000046424065?utm_source=sf-similar-question" target="_blank"><h5 class="text-break text-body">threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？</h5><div class="text-secondary text-truncate-1 font-size-14 mb-2">尝试过改变碰撞后位移的值capsule&&capsule.translate(result.normal.multiplyScalar( result.depth));</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">1<!-- --> 回答</span><span class="split-dot"></span><span>1.1k<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li><li class="py-3 list-group-item list-group-item-action"><a href="/q/1010000046473185?utm_source=sf-similar-question" target="_blank"><h5 class="text-break text-body">Vue为什么说textarea标签不支持插值表达式的？</h5><div class="text-secondary text-truncate-1 font-size-14 mb-2">演练场实测是可以的：官方文档说不支持：deepseek也说了不支持的原因：可是实测不是能看到标签解析了插值表达式吗？并没有当字符串来显示。</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">1<!-- --> 回答</span><span class="split-dot"></span><span>921<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li><li class="py-3 list-group-item list-group-item-action"><a href="/q/1010000046213552?utm_source=sf-similar-question" target="_blank"><h5 class="text-break text-body">为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?</h5><div class="text-secondary text-truncate-1 font-size-14 mb-2">{代码...} 这里绿色可以占据整个屏幕</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">2<!-- --> 回答</span><span class="split-dot"></span><span>795<!-- --> 阅读</span></p></a></li><li class="py-3 list-group-item list-group-item-action"><a href="/q/1010000046520287?utm_source=sf-similar-question" target="_blank"><h5 class="text-break text-body">单页应用网站缓存不是由于index.html文件被缓存导致的吗？</h5><div class="text-secondary text-truncate-1 font-size-14 mb-2">单页应用引用的静态资源更新了，但是浏览器还是使用缓存的原因不是因为index.html文件被缓存，导致引用的静态资源hash值还是旧版本的资源吗？那为何服务端不配置一下让浏览器不缓存index.html文件，这样每次用户访问都是最新的index.html文件，里面引用的静态资源自然也是最新的，问题不就解决了吗？为何还会衍生出诸如...</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">1<!-- --> 回答</span><span class="split-dot"></span><span>796<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li></ul></div></div><div class="w-xl-300 d-none d-xl-block col-auto"><div><div class="sticky-outer-wrapper"><div class="sticky-inner-wrapper" style="position:relative;top:0px"><div class="mb-4"><div class="bg-dark card"><div class="d-flex align-items-center card-body"><picture class="me-3 "><img class="rounded" src="https://avatar-static.segmentfault.com/315/258/3152588376-62ff5cc2ea2d8_huge128" width="48" height="48" alt="logo"/></picture><div style="flex:1"><h6 class="text-white">Stack Overflow 翻译</h6><span class="text-secondary">子站问答</span></div><a role="button" tabindex="0" href="/site/stackoverflow" class="ms-3 btn btn-warning">访问</a></div></div></div><div class="mb-4"><div role="alert" class="fade d-none d-xl-block alert alert-light show">本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。</div></div><div class=""><div id="first-ad" class="border-0 overflow-hidden sflex-center float-ads mb-4 d-none card"><div id="OA_holder_1" class="OA_holder" style="display:none"></div></div></div><div class=""><div class="card"><div class="bg-transparent card-header"><strong>相似问题</strong></div><ul class="list-group list-group-flush"><li class="py-2 list-group-item list-group-item-action"><a href="/q/1010000042590414?utm_source=sf-similar-question" target="_blank"><div class="text-break text-body text-truncate-2">带css的透明滚动条</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">1<!-- --> 回答</span><span class="split-dot"></span><span>751<!-- --> 阅读</span></p></a></li><li class="py-2 list-group-item list-group-item-action"><a href="/q/1010000042615808?utm_source=sf-similar-question" target="_blank"><div class="text-break text-body text-truncate-2">Firefox 中的滚动条颜色变化</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">2<!-- --> 回答</span><span class="split-dot"></span><span>732<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li><li class="py-2 list-group-item list-group-item-action"><a href="/q/1010000042401729?utm_source=sf-similar-question" target="_blank"><div class="text-break text-body text-truncate-2">创建具有自动调整大小的文本区域</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">2<!-- --> 回答</span><span class="split-dot"></span><span>743<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li><li class="py-2 list-group-item list-group-item-action"><a href="/q/1010000042580663?utm_source=sf-similar-question" target="_blank"><div class="text-break text-body text-truncate-2">向 HTML 表格添加水平滚动条</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">2<!-- --> 回答</span><span class="split-dot"></span><span>1k<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li><li class="py-2 list-group-item list-group-item-action"><a href="/q/1010000042582153?utm_source=sf-similar-question" target="_blank"><div class="text-break text-body text-truncate-2">如何用 CSS 改变滚动条的位置？</div><p class="text-secondary mb-0 font-size-14"><span class="text-primary">2<!-- --> 回答</span><span class="split-dot"></span><span>848<!-- --> 阅读</span><span class="ms-3 badge rounded-pill bg-success">✓ 已解决</span></p></a></li></ul><div class="bg-transparent text-center border-top py-2 card-footer">找不到问题？<a href="/ask" target="_blank">创建新问题</a></div></div></div><div class="my-4 "><div class="d-none card"><div class="bg-white border-0 card-header"><strong>宣传栏</strong></div><div class="card-body"><div class="mb-3"><div id="OA_holder_7" class="OA_holder" style="display:none"></div></div><div class="mb-3"><div id="OA_holder_9" class="OA_holder" style="display:none"></div></div><div><div id="OA_holder_10" class="OA_holder" style="display:none"></div></div></div></div></div><div class="d-none d-xl-block"><div id="OA_holder_31" class="OA_holder" style="display:none"></div></div></div></div></div></div></div><div class="d-block d-sm-none fix-bottom-action-wrap"><div class="w-100 fixed-bottom-action d-flex align-items-center "><button type="button" aria-label="浏览" class="btn-reset text-center link-dark w-25 btn btn-link"><i class="far fa-eye"></i><span class="mainLikeNum ms-1">621</span></button><button type="button" aria-label="收藏" class="btn-reset text-center link-dark w-25 btn btn-link"><i class="far fa-bookmark"></i></button><a class="text-center link-dark w-25" href="#comment-area"><i class="far fa-message-lines"></i></a><div class="bottom-share-wrap w-25 text-center dropdown"><button type="button" id="react-aria-5" aria-expanded="false" aria-label="分享" class="btn-reset link-dark dropdown-toggle btn btn-link"><i class="far fa-share-nodes"></i></button></div><canvas hidden="" class="qrcode"></canvas></div><canvas hidden="" class="qrcode"></canvas></div></div><footer id="footer" class="d-none d-sm-block bg-white py-5 font-size-14 border-top"><div class="container"><div class="row"><dl class="col-md-2 col-4"><dt class="h6">思否旗下产品</dt><dd class="my-1"><a class="link-secondary" href="/" target="_blank">SegmentFault</a></dd><dd class="my-1"><a class="link-secondary" href="https://business.segmentfault.com?utm_source=sf-footer" target="_blank">思否企业服务</a></dd><dd class="my-1"><a class="link-secondary" href="https://ke.segmentfault.com?utm_source=sf-footer" target="_blank">思否公开课</a></dd><dd class="my-1"><a class="link-secondary" href="https://business.segmentfault.com/answer-ee?utm_source=sf-footer" target="_blank">思否企业问答</a></dd></dl><dl class="col-md-2 col-4"><dt class="h6">ONES 旗下产品</dt><dd class="my-1"><a class="link-secondary" href="https://ones.cn?utm_source=sf-footer" target="_blank">ONES</a></dd><dd class="my-1"><a class="link-secondary" href="https://tower.im/?utm_source=sf-footer" target="_blank">Tower</a></dd><dd class="my-1"><a class="link-secondary" href="https://wiz.cn?utm_source=sf-footer" target="_blank">为知笔记</a></dd><dd class="my-1"><a class="link-secondary" href="https://ones.cn/app-center/segmentfault?utm_source=segmentfault" target="_blank">企业问答</a></dd><dd class="my-1"><a class="link-secondary" href="https://ones.com/" target="_blank">ONES.com</a></dd><dd class="my-1"><a class="link-secondary" href="https://ones.com.cn/" target="_blank">项目管理百科</a></dd></dl><dl class="col-md-2 col-4"><dt class="h6">资源</dt><dd class="my-1"><a class="link-secondary" href="/weekly?utm_source=sf-footer" target="_blank">每周精选</a></dd><dd class="my-1"><a class="link-secondary" href="/users?utm_source=sf-footer" target="_blank">用户排行榜</a></dd><dd class="my-1"><a class="link-secondary" href="/help?utm_source=sf-footer" target="_blank">帮助中心</a></dd><dd class="my-1"><a class="link-secondary" href="/0x?utm_source=sf-footer" target="_blank">建议反馈</a></dd><dd class="my-1"><a class="link-secondary" href="/help/rights?utm_source=sf-footer" target="_blank">声望</a></dd><dd class="my-1"><a class="link-secondary" href="/help/badges?utm_source=sf-footer" target="_blank">勋章</a></dd></dl><dl class="col-md-2 col-4"><dt class="h6">合作</dt><dd class="my-1"><a class="link-secondary" href="https://business.segmentfault.com/about?utm_source=sf-footer" target="_blank">关于我们</a></dd><dd class="my-1"><a class="link-secondary" href="https://business.segmentfault.com/ads?utm_source=sf-footer" target="_blank">广告投放</a></dd><dd class="my-1"><a class="link-secondary" href="https://business.segmentfault.com/contact?utm_source=sf-footer" target="_blank">联系我们</a></dd><dd class="my-1"><a class="link-secondary" href="https://business.segmentfault.com/partners" target="_blank">合作伙伴</a></dd></dl><dl class="col-md-2 col-4"><dt class="h6">关注</dt><dd class="my-1"><a class="link-secondary" href="/blog/segmentfault?utm_source=sf-footer" target="_blank">产品技术日志</a></dd><dd class="my-1"><a class="link-secondary" href="/blog/community_governance?utm_source=sf-footer" target="_blank">社区运营日志</a></dd><dd class="my-1"><a class="link-secondary" href="/blog/segmentfault_news?utm_source=sf-footer" target="_blank">市场运营日志</a></dd><dd class="my-1"><a class="link-secondary" href="/blog/interview?utm_source=sf-footer" target="_blank">社区访谈</a></dd></dl><dl id="license" class="col-md-2 col-4"><dt class="h6">条款</dt><dd class="my-1"><a class="link-secondary" href="/tos?utm_source=sf-footer" target="_blank">服务协议</a></dd><dd class="my-1"><a class="link-secondary" href="/privacy?utm_source=sf-footer" target="_blank">隐私政策</a></dd><dd class="my-1"><a class="link-secondary" href="/app?utm_source=sf-footer">下载 App</a></dd><dd class="my-1"><div class="shareContent"><a class="share_weixin" data-share="weixin" href="#javascript" aria-label="微信"><i class="fab fa-weixin"></i></a><a class="share_weibo" data-share="weibo" href="http://weibo.com/segmentfault" target="_blank" aria-label="微博"><i class="fab fa-weibo"></i></a><a class="share_github" data-share="github" href="https://github.com/SegmentFault" target="_blank" aria-label="github"><i class="fab fa-github"></i></a><a class="share_twitter me-0" data-share="twitter" href="https://twitter.com/segment_fault" target="_blank" aria-label="twitter"><i class="fab fa-x-twitter"></i></a></div></dd></dl></div><hr class="mb-4 mt-2 bg-black bg-opacity-50"/><div class="row"><div class="col-md-8"><div class="text-secondary"><p class="mb-1">Copyright © 2011-<!-- -->2025<!-- --> SegmentFault. 当前呈现版本 <!-- -->25.06.09</p><p class="mb-1"><a class="link-secondary me-2" target="_blank" href="http://beian.miit.gov.cn" rel="nofollow noreferrer">浙ICP备15005796号-2</a><a class="link-secondary me-2" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602002000" rel="nofollow noreferrer">浙公网安备33010602002000号</a><span class="text-secondary">ICP 经营许可 浙B2-20201554</span></p><p class="mb-0">杭州堆栈科技有限公司版权所有</p></div></div><div class="col-md-4 text-end font-size-14"><a href="https://business.segmentfault.com/" class="link-secondary" target="_blank">思否 - 凝聚集体智慧，推动技术进步</a></div></div></div></footer></div></div><script src="https://static.geetest.com/static/tools/gt.js"></script><script defer="" data-domain="segmentfault.com" src="https://stats.segmentfault.net/js/plausible.js"></script><script defer="" src="https://hm.baidu.com/hm.js?e23800c454aa573c0ccb16b52665ac26"></script><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-MJYFRXB3ZX"></script><script id="google-analytics"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-MJYFRXB3ZX') </script></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"initialState":{"@@dva":0,"loading":{"global":false,"models":{},"effects":{}},"question":{"questionDetail":{"1010000043093177":{"question":{"id":1010000043093177,"url":"/q/1010000043093177","title":"从文本区域中删除滚动条","tags_list":"1040000000089571,1040000000164695,1040000000091220,1040000004445816,1040000000164694","parsed_text":"","short_url":"http://sfau.lt/bNc4YFp","share_url":"/q/1010000043093177","edit_url":"/q/1010000043093177/edit","excerpt":"继我之前关于如何始终在 \u0026lt;textarea\u0026gt; 中看到滚动条的问题（ 将滚动条添加到 ）之后，我现在想知道如何设置它以便在 \u0026lt;textarea\u0026gt; ，即使文本溢出。要向下滚动，您可以使用箭头键或鼠标在文本中导航。","thumbnail_url":null,"status":0,"comments":0,"followers":0,"is_followed":false,"ip_address":null,"likes":-1,"hates":-1,"is_liked":false,"is_hated":false,"bookmarks":0,"is_bookmarked":false,"is_invited":false,"created":1671097735,"modified":1671097735,"votes":0,"answers":2,"real_views":621,"user_id":1030000042357468,"is_edited":0,"is_site":1,"is_wiki":1,"tags":[{"name":"html","url":"/t/html","id":1040000000089571,"rank":776451,"icon_url":"","content_count":50767},{"name":"scroll","url":"/t/scroll","id":1040000000164695,"rank":1923,"icon_url":"","content_count":233},{"name":"textarea","url":"/t/textarea","id":1040000000091220,"rank":1532,"icon_url":"","content_count":131},{"name":"scrollbar","url":"/t/scrollbar","id":1040000004445816,"rank":345,"icon_url":"","content_count":75},{"name":"overflow","url":"/t/overflow","id":1040000000164694,"rank":575,"icon_url":"","content_count":83}],"user":null,"editor":null,"site":{"id":1140000000383666,"url":"/site/stackoverflow","thumbnail_url":"https://avatar-static.segmentfault.com/315/258/3152588376-62ff5cc2ea2d8_huge128","description":"众包翻译 Stack Overflow 上的热门问题，欢迎大家帮助改进翻译结果","name":"Stack Overflow 翻译","slug":"stackoverflow"},"revision":{"created":1671097735},"activity_submission":null,"status_key":"available"},"invited_info":null,"site":{"id":1140000000383666,"url":"/site/stackoverflow","thumbnail_url":"https://avatar-static.segmentfault.com/315/258/3152588376-62ff5cc2ea2d8_huge128","description":"众包翻译 Stack Overflow 上的热门问题，欢迎大家帮助改进翻译结果","name":"Stack Overflow 翻译","slug":"stackoverflow"},"page_title":"html - 从文本区域中删除滚动条","keywords":"html,scroll,textarea,scrollbar,overflow","description":"继我之前关于如何始终在 \u0026lt;textarea\u0026gt; 中看到滚动条的问题（ 将滚动条添加到 ）之后，我现在想知道如何设置它以便在 \u0026lt;textarea\u0026gt; ，即使文本溢出。要向下滚动，您可以使用箭头键或鼠标在文本中导航。","answers":{"accepted":[{"id":1020000043093181,"url":"/q/1010000043093177/a-1020000043093181","parsed_text":"","short_url":"http://sfau.lt/bOc4YFt","edit_url":"/q/1010000043093177/a-1020000043093181/edit","likes":-1,"hates":-1,"is_liked":false,"user_id":1030000042357479,"is_hated":false,"created":1671097735,"comments":0,"modified":1671097735,"votes":0,"reason":null,"question_id":1010000043093177,"is_edited":0,"is_wiki":1,"ip_address":null,"status":1,"user":null,"editor":null,"operator":null,"activity_submission":null,"member_actions":[],"status_key":"accepted","type":"accepted"}],"available":[{"id":1020000043093179,"url":"/q/1010000043093177/a-1020000043093179","parsed_text":"","short_url":"http://sfau.lt/bOc4YFr","edit_url":"/q/1010000043093177/a-1020000043093179/edit","likes":-1,"hates":-1,"is_liked":false,"user_id":1030000042357474,"is_hated":false,"created":1671097735,"comments":0,"modified":1671097735,"votes":0,"reason":null,"question_id":1010000043093177,"is_edited":0,"is_wiki":1,"ip_address":null,"status":0,"user":null,"editor":null,"operator":null,"activity_submission":null,"member_actions":[],"status_key":"available","type":"available"}],"ignored":[]},"draft":null,"answered_id":null,"answered":null,"can_answer":false,"sort":"rank","actions":[],"tag":{"name":"Stack Overflow 翻译","url":"/site/stackoverflow","icon_url":"https://avatar-static.segmentfault.com/315/258/3152588376-62ff5cc2ea2d8_huge128"},"member_actions":[],"answer_limit_time":0,"extra":{"reason":null,"operator":null,"operator_time":null},"ai_answer":null,"is_ai":false,"ai_votes":null,"submission_activities":[],"isServerLoaded":true}},"relateDetail":{"1010000043093177":{"tags":["1040000000089571","1040000000164695","1040000000091220","1040000004445816","1040000000164694"],"related":[{"id":1010000042590414,"url":"/q/1010000042590414","title":"带css的透明滚动条","excerpt":"现在使用此代码（以及此代码的许多变体），但滚动轨道变为深灰色，类似于 #222222 或接近此。找到许多示例，但所有示例都给出相同的结果。 Opera、Chrome 和 Firefox 显示此错误。怎么修？","real_views":751,"answers":1,"accepted_answer_id":0,"tags":[{"id":1040000000089571,"name":"html"},{"id":1040000000089434,"name":"css"},{"id":1040000004445816,"name":"scrollbar"}]},{"id":1010000042615808,"url":"/q/1010000042615808","title":"Firefox 中的滚动条颜色变化","excerpt":"我想更改 Firefox 中的滚动条颜色。我怎样才能做到这一点？ 原文由 XMen 发布，翻译遵循 CC BY-SA 4.0 许可协议","real_views":732,"answers":2,"accepted_answer_id":1020000042615812,"tags":[{"id":1040000000089434,"name":"css"},{"id":1040000000090217,"name":"firefox"},{"id":1040000000164695,"name":"scroll"},{"id":1040000004445816,"name":"scrollbar"}]},{"id":1010000042401729,"url":"/q/1010000042401729","title":"创建具有自动调整大小的文本区域","excerpt":"关于这个还有另一个线程，我已经尝试过了。但是有一个问题：如果删除内容， textarea 不会缩小。我找不到任何方法将其缩小到正确的大小 - clientHeight 值返回为 textarea 的完整大小，而不是其内容。","real_views":743,"answers":2,"accepted_answer_id":1020000042401733,"tags":[{"id":1040000000089436,"name":"javascript"},{"id":1040000000089571,"name":"html"},{"id":1040000042401725,"name":"resize"},{"id":1040000042401727,"name":"height"},{"id":1040000000091220,"name":"textarea"}]},{"id":1010000042580663,"url":"/q/1010000042580663","title":"向 HTML 表格添加水平滚动条","excerpt":"有没有办法在 HTML 表格中添加水平滚动条？我实际上需要它可以垂直和水平滚动，具体取决于表格的增长方式，但我无法让任一滚动条出现。 原文由 Tsundoku 发布，翻译遵循 CC BY-SA 4.0 许可协议","real_views":1033,"answers":2,"accepted_answer_id":1020000042580667,"tags":[{"id":1040000000089571,"name":"html"},{"id":1040000000089434,"name":"css"},{"id":1040000042375665,"name":"html-table"},{"id":1040000004445816,"name":"scrollbar"}]},{"id":1010000042582153,"url":"/q/1010000042582153","title":"如何用 CSS 改变滚动条的位置？","excerpt":"有没有办法用 CSS 从左到右或从下到上改变滚动条的位置？ 原文由 Mohsen Safari 发布，翻译遵循 CC BY-SA 4.0 许可协议","real_views":848,"answers":2,"accepted_answer_id":1020000042582157,"tags":[{"id":1040000000089571,"name":"html"},{"id":1040000000089434,"name":"css"},{"id":1040000004445816,"name":"scrollbar"}]}]}},"quotedData":{"rows":[],"page":1,"size":5,"total_page":0,"total":0},"questionRecommendationList":[{"id":1010000046405137,"url":"/q/1010000046405137","title":"问一个鼠标滚动事件，这种是怎么实现的？","excerpt":"我看到了deepseek官网的这个按钮，鼠标放上去，还是可以滚动页面，这个是怎么做的？我研究了一下deepseek官网的支持，而通义千问的却不可以。","real_views":1524,"answers":2,"accepted_answer_id":1020000046406204,"tags":[{"id":1040000000089899,"name":"前端"},{"id":1040000000089571,"name":"html"},{"id":1040000000090141,"name":"css3"}]},{"id":1010000046280498,"url":"/q/1010000046280498","title":"如何在CSS中实现滚动条不溢出圆角框？","excerpt":"请问css如何实现滚动条在外侧滚动框的下一层？我最近在设计一个小插件，里面有一个换肤的小弹窗，小弹窗里还有一个小框，在这个小框里加了滚动条，小框为了美化做了border-radius，然后为这个框自定义了::webkit-scrollbar伪类，但是我发现这个滚动条会溢出这个框，很不好看，下图为现在的效果：我想做到上下的滚动条可...","real_views":1347,"answers":2,"accepted_answer_id":1020000046299540,"tags":[{"id":1040000000089434,"name":"css"},{"id":1040000000180872,"name":"border-radius"},{"id":1040000000460662,"name":"z-index"},{"id":1040000000164694,"name":"overflow"}]},{"id":1010000046499098,"url":"/q/1010000046499098","title":"form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？","excerpt":"{代码...} {代码...} 这种基于name直接读取dom元素的写法，兼容性如何？有无标准说明？","real_views":912,"answers":2,"accepted_answer_id":1020000046499218,"tags":[{"id":1040000000089436,"name":"javascript"},{"id":1040000000089571,"name":"html"},{"id":1040000000089409,"name":"html5"},{"id":1040000000089899,"name":"前端"}]},{"id":1010000046424065,"url":"/q/1010000046424065","title":"threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？","excerpt":"尝试过改变碰撞后位移的值capsule\u0026\u0026capsule.translate(result.normal.multiplyScalar( result.depth));","real_views":1149,"answers":1,"accepted_answer_id":1020000046428246,"tags":[{"id":1040000000429728,"name":"three.js"},{"id":1040000000089571,"name":"html"}]},{"id":1010000046473185,"url":"/q/1010000046473185","title":"Vue为什么说textarea标签不支持插值表达式的？","excerpt":"演练场实测是可以的：官方文档说不支持：deepseek也说了不支持的原因：可是实测不是能看到标签解析了插值表达式吗？并没有当字符串来显示。","real_views":921,"answers":1,"accepted_answer_id":1020000046473498,"tags":[{"id":1040000004003243,"name":"vue.js"},{"id":1040000000089571,"name":"html"}]},{"id":1010000046213552,"url":"/q/1010000046213552","title":"为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?","excerpt":"{代码...} 这里绿色可以占据整个屏幕","real_views":795,"answers":2,"accepted_answer_id":0,"tags":[{"id":1040000000089899,"name":"前端"},{"id":1040000000089571,"name":"html"}]},{"id":1010000046520287,"url":"/q/1010000046520287","title":"单页应用网站缓存不是由于index.html文件被缓存导致的吗？","excerpt":"单页应用引用的静态资源更新了，但是浏览器还是使用缓存的原因不是因为index.html文件被缓存，导致引用的静态资源hash值还是旧版本的资源吗？那为何服务端不配置一下让浏览器不缓存index.html文件，这样每次用户访问都是最新的index.html文件，里面引用的静态资源自然也是最新的，问题不就解决了吗？为何还会衍生出诸如...","real_views":796,"answers":1,"accepted_answer_id":1020000046521405,"tags":[{"id":1040000000523653,"name":"浏览器缓存"},{"id":1040000000089899,"name":"前端"},{"id":1040000000089436,"name":"javascript"},{"id":1040000000089571,"name":"html"}]}]},"action":{"1010000043093177":{"votes":0,"isLiked":false,"isHated":false,"bookmarks":0,"isBookmarked":false},"1020000043093181":{"votes":0,"isLiked":false,"isHated":false,"bookmarks":0,"isBookmarked":false},"1020000043093179":{"votes":0,"isLiked":false,"isHated":false,"bookmarks":0,"isBookmarked":false}},"editor":{"markdownContent":"","title":{"value":"","isInvalid":false,"errorMsg":""},"log":{"value":"","isInvalid":false,"errorMsg":""},"tags":{"value":[],"isInvalid":false,"errorMsg":""},"draftInfo":{"id":"","status":"","statusText":""},"isFull":false,"initTags":[],"detail":{}},"global":{"sessionUser":null,"isHiddenHeader":false,"isHiddenFooter":false,"title":"html - 从文本区域中删除滚动条 - SegmentFault 思否","titleAlias":"从文本区域中删除滚动条 - SegmentFault 思否","isShowLogin":false,"beginnerGuideState":{"visible":false,"type":1},"isShowBindMobile":false,"unactivated":false,"isShowRegister":false,"headOptions":{"keywords":"html,scroll,textarea,scrollbar,overflow","description":"继我之前关于如何始终在 \u0026lt;textarea\u0026gt; 中看到滚动条的问题（ 将滚动条添加到 ）之后，我现在想知道如何设置它以便在 \u0026lt;textarea\u0026gt; ，即使文本溢出。要向下滚动，您可以使用箭头键或鼠标在文本中导航。"},"sessionInfo":{"key":"ab0548e71a0861d67d67bc63bed57312","login":false,"id":null},"singleNotice":"","currentRoute":{"noLayout":false,"customLayout":false,"headerType":"default","platform":"","action":"","param":""},"letterNum":0,"noticeNum":0,"serverData":{"Token":"","userAgent":"Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [e-mail])","platform":""},"userStat":{},"newTask":{},"authChannel":"","followedTags":[],"globalCss":"","baiduOxAppState":{"isShow":false,"copyUrl":""},"wxShareCover":"","isBaiduOxApp":false,"showProductAuthModal":{"isShow":false,"title":""},"routeInterceptor":{"path":""},"safeCheckModal":{"isShow":false,"pageSource":""},"followSFState":{"isShow":false},"messageNotice":{"event":{"general":0,"ranked":0,"followed":0,"inbox":0,"comment":0,"marketing":0},"message":0,"badge":0},"badgeModalState":{},"asidesData":{},"metaQuestions":{},"notices":{"rows":[],"size":3},"recommendSites":[{"id":1140000000592323,"url":"/site/thinking","thumbnail_url":"https://avatar-static.segmentfault.com/159/147/1591470715-67498d9667680_tiny24","name":"极客观点","slug":"thinking"},{"id":1140000044937282,"url":"/site/rdmanagement","thumbnail_url":"https://avatar-static.segmentfault.com/297/875/2978758509-67498f579c239_tiny24","name":"项目管理","slug":"rdmanagement"}],"adOptions":{"tag":"html,scroll,textarea,scrollbar,overflow"},"serverTime":1749469037}}},"__N_SSP":true},"page":"/Questions/Detail","query":{"qid":"1010000043093177"},"buildId":"7RRTPxwTEcAy6zhkgHUy6","assetPrefix":"https://static.segmentfault.com/main_site_next/prod","runtimeConfig":{"publicPath":"https://static.segmentfault.com/main_site_next/prod/","appVersion":"25.06.09"},"isFallback":false,"isExperimentalCompile":false,"gssp":true,"scriptLoader":[]}</script></body></html>