我正在创建一个包含很多信息的模态，我只想在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">×</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/
我希望只在模式中隐藏滚动条。
最佳答案
您可能正在寻找这样的东西：
.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">×</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