隐藏可滚动表中的垂直滚动

Question

我实现了带有固定列并启用了垂直和水平滚动的可滚动表。 我想隐藏在固定列旁边显示的垂直滚动。 这是塞子链接 。 我的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

这样做没有真正的跨浏览器解决方案，但是可以在这里找到最佳答案：

将滚动条隐藏在HTML页面上

链接回答

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

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

如果要隐藏所有滚动条，请使用

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

我不确定要还原-确实可以，但是可能有正确的方法：

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

当然，您总是可以使用width: 0 ，然后可以通过width: auto轻松地恢复它，但是我不喜欢滥用width来进行可见性调整。

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

 .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指着我在这里时要寻找的东西，因此我认为我还是会发布它。）

Answer 2

更改溢出-y：隐藏，高度为150px

喜欢

<div style="height:150px; overflow-y:hide"  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>

链接： http ： //plnkr.co/edit/dFE0HX7W5hWsUztc37La？p = preview