如何使用浏览器滚动条水平滚动内部 div？答案

【问题标题】：How to horizontally scroll a inner div with browser scrollbar?如何使用浏览器滚动条水平滚动内部 div？
【发布时间】：2017-01-26 07:08:50
【问题描述】：

我需要使内部 div 水平滚动，但使用浏览器滚动条而不是特定 div 的滚动条。

一个选项是将所有其他 div 的位置设为静态并溢出包装 div，但由于我正在修改预制模板，我希望能够在不更改布局的情况下执行此操作。从这个意义上说，JavaScript/jQuery 插件会很好，但完全不是必须的。

代码如下：

<title>This is a test</title>
<body>
   <header>
      This is the header.
   </header>
   <div id="wrapper">
      <div id="left-sidebar">
         This is the left sidebar.
      </div>
      <div id="test">
         <div id="content">
            This is the main content.
            <div id="flex">
               <div id="rectangle"></div>
               <div id="rectangle"></div>
               <div id="rectangle"></div>
               <div id="rectangle"></div>
               <div id="rectangle"></div>
               <div id="rectangle"></div>
               <div id="rectangle"></div>
            </div>
         </div>
      </div>
   </div>
   <footer>
      This is the footer. 
   </footer>
</body>

这里是 jsFiddle：https://jsfiddle.net/k6e3sv6v/

谢谢胸罩

【问题讨论】：

看起来你申请了overflow-x: scroll onf #flex 这是我的建议。那么有什么问题呢？
a) 只是指出：静态定位可能并不意味着你的意思。默认情况下，所有内容都是静态定位的。例如，与固定定位非常不同。 b）您所要求的并不是要完成的，任何涉及实际顶级浏览器滚动条的解决方案都将是一个彻底的黑客攻击。只是不要这样做，它会混淆用户的活生生的灵魂，并且可能会破坏事物的可访问性。
@inorganik 我在#test 上应用了它，但我需要使用浏览器滚动条滚动，因为滚动条显示在底部。
@Roope，a) 谢谢，你是对的！我的意思是固定的，而不是静态的。 b) 你是对的，但用于 GUI 的 HTML/CSS 本身就是一个彻底的 hack，我不在乎它最终被淘汰。

标签： html css flexbox

【解决方案1】：

我认为如果整个页面宽度超过 100% 宽度，您无法将 BROWSER 滚动条集中到某个 div 中。

但我认为可以通过将该 div 周围的所有其他元素作为固定位置来完成，即使滚动左右移动也不会在屏幕上移动...

【讨论】：