从链接

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

从链接

回答

为了完整性＆＃39;这个适用于webkit：

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

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

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

我不确定还原 - 这确实有效，但可能有正确的方法：

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

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

（请注意，对于这个问题，这不是一个正确的答案，因为它也会隐藏水平条，但是当Google在这里指出我所寻找的时候，我认为我＆＃ 39;无论如何都要发布它。）

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

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

2 个答案:

从链接