仅在模态中隐藏滚动，但仍可在模态中滚动答案

【问题标题】：Hide Scroll in Modal ONLY but still scrollable inside the modal仅在模态中隐藏滚动，但仍可在模态中滚动
【发布时间】：2019-06-21 01:48:02
【问题描述】：

我正在创建一个包含大量信息的模态，我只想在 MODAL 中隐藏 scollbar，而不是在正文中，但在模态中仍然可以滚动。

我试过了

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

但它也将 scollbar 隐藏在正文中。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body" style='overflow-y: scroll; height:350px;'>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

这是 JS Fiddel http://jsfiddle.net/tLrmb5a8/

我希望仅将滚动隐藏在模式内部。

【问题讨论】：

您好，模态框没有滚动条。即将到来的滚动条是body。谢谢

标签： jquery html css modal-dialog

【解决方案1】：

也许你正在寻找这样的东西：

.modal-body{
  height:300px;
  overflow-y:auto;
}

@-moz-document url-prefix() {
   /*firefox*/
   .modal-content {
    overflow: hidden;
   }
   .modal-body{
     margin-right: -16px;
     overflow-y: scroll;
     overflow-x: hidden;
   }
}

.modal-body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

JsFiddle Fork 或代码段：

.modal-body{
  height:300px;
  overflow-y:auto;
}

@-moz-document url-prefix() {
   /*firefox*/
   .modal-content {
    overflow: hidden;
   }
   .modal-body{
     margin-right: -16px;
     overflow-y: scroll;
     overflow-x: hidden;
   }
}

.modal-body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

感谢Firefox scroll 和Firefox specific margin

【讨论】：

@KoshVery 在 Firefox 中更新和测试 :) 感谢您通知跨浏览器问题