javascript - 在可滚动表中隐藏垂直滚动

Question

我已经实现了一个带有固定列并启用垂直和水平滚动的可滚动表格。我想隐藏出现在固定列旁边的垂直滚动。这是 plunker link .我的 html 看起来像这样:

<div class="col-md-12">
      <div class="col-md-3" style="padding:0;">
        <table class="table" style="margin-bottom:0;">
          <thead>
            <tr>
              <th>fixed</th>
            </tr>
          </thead>
        </table>
        <div style="height:100px; overflow-y:auto" id="fixed" on-scroll="">
          <table class="table" style="margin-bottom:0">
            <tbody>
              <tr data-ng-repeat="data in [1,2,3,4]">
                <td>data data data data data data data data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-9" style="padding:0;overflow:hidden">
        <div id="topRight" style="padding:0;overflow-x:hidden" on-scroll="">
          <table class="table" style="margin-bottom:0">
            <thead>
              <tr>
                <th style="min-width:200px">column 1</th>
                <th style="min-width:200px">column 2</th>
                <th style="min-width:200px">column 3</th>
                <th style="min-width:200px">column 4</th>
                <th style="min-width:200px">column 5</th>
              </tr>
            </thead>
          </table>
        </div>
        <div style="height:100px; overflow:auto" id="bottomRight" on-scroll="">
          <table class="table" style="margin-bottom:0">
            <tbody>
              <tr data-ng-repeat="data in [1,2,3,4]">
                <td style="min-width:200px">data data data data data data data data</td>
                <td style="min-width:200px">data data data data data data data data</td>
                <td style="min-width:200px">data data data data data data data data</td>
                <td style="min-width:200px">data data data data data data data data</td>
                <td style="min-width:200px">data data data data data data data data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

谢谢

Answer 1

执行此操作没有真正的跨浏览器解决方案，但您可以在此处找到最佳答案:

Hiding the scrollbar on an HTML page

来自链接的答案

为了完整起见，这适用于 webkit:

#element::-webkit-scrollbar { 
    display: none; 
}

如果你想隐藏所有的滚动条，使用

::-webkit-scrollbar { 
    display: none; 
}

我不确定是否要恢复 - 这确实有效，但可能有正确的方法:

::-webkit-scrollbar { 
    display: block; 
}

您当然可以始终使用 width: 0，这可以通过 width: auto 轻松恢复，但我不喜欢滥用 宽度 用于可见性调整。

要查看您当前的浏览器是否支持此功能，请尝试以下代码段:

.content {
  /* These rules create an artificially confined space, so we get 
     a scrollbar that we can hide. They are not part of the hiding itself. */

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

---

(请注意，这并不是问题的真正正确答案，因为它也隐藏了水平条，但当 Google 将我指向此处时，这正是我正在寻找的内容，所以我想无论如何我都会发布它.)