我正在创建一个包含很多信息的模式，我只想将scollbar隐藏在MODAL中，而不是隐藏在主体中，但仍可以在模式中滚动。
我尝试过
::-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/
我希望只将滚动条隐藏在模式中。
答案 0 :(得分：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">×</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>