CSS可以用来隐藏滚动条吗？你会怎么做？
当前回答
除了彼得的回答：
如果您想从iframe中删除滚动条，则需要在iframe网站中添加用于删除滚动条的样式。无法在包含滚动条的iframe中设置元素的样式。
具有iframe的网站：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<body>
<iframe src="/iframe"></iframe>
</body>
</html>
已命名的网站：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<style>
html, body {
margin: 0;
padding: 0
}
.content {
scrollbar-width: none;
}
.content::-webkit-scrollbar {
display: none;
}
.content {
height: 100vh;
overflow: scroll;
}
</style>
<body>
<div class="content">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
其他回答
即使溢出，我的答案也会滚动：隐藏；，使用jQuery：
例如，使用鼠标滚轮水平滚动：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
$(function() {
$("YourSelector").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
您可以使用隐藏溢出的包装器div，并将内部div设置为auto来实现这一点。
要删除内部div的滚动条，可以通过对内部div应用负边距将其从外部div的视口中拉出。然后对内部div使用相等的填充，以使内容保持在视图中。
JSFiddle公司
###HTML格式
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>
###CSS格式
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max scrollbar width across the devices that
* you are supporting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
CSS可以用来隐藏滚动条吗？你会怎么做？
如果要从浏览器视口中删除垂直（和水平）滚动条，请添加：
style="position: fixed;"
到＜body＞元素。
Java脚本：
document.body.style.position = 'fixed';
CSS:
body {
position: fixed;
}
我编写了一个WebKit版本，其中包含一些选项，如自动隐藏、小版本、仅滚动-y或仅滚动-x：
._scrollable{
@size: 15px;
@little_version_ratio: 2;
@scrollbar-bg-color: rgba(0,0,0,0.15);
@scrollbar-handler-color: rgba(0,0,0,0.15);
@scrollbar-handler-color-hover: rgba(0,0,0,0.3);
@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
&::-webkit-scrollbar {
background: none;
width: @size;
height: @size;
}
&::-webkit-scrollbar-track {
background-color:@scrollbar-bg-color;
border-radius: @size;
}
&::-webkit-scrollbar-thumb {
border-radius: @size;
background-color:@scrollbar-handler-color;
&:hover{
background-color:@scrollbar-handler-color-hover;
}
}
&::-webkit-scrollbar-corner {
background-color: @scrollbar-coner-color;
}
&.little{
&::-webkit-scrollbar {
background: none;
width: @size / @little_version_ratio;
height: @size / @little_version_ratio;
}
&::-webkit-scrollbar-track {
border-radius: @size / @little_version_ratio;
}
&::-webkit-scrollbar-thumb {
border-radius: @size / @little_version_ratio;
}
}
&.autoHideScrollbar{
overflow-x: hidden;
overflow-y: hidden;
&:hover{
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&.only-y{
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x{
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
}
&.only-y:not(.autoHideScrollbar){
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x:not(.autoHideScrollbar){
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
http://codepen.io/hicTech/pen/KmKrjb
我的HTML是这样的：
<div class="container">
<div class="content">
</div>
</div>
将其添加到要隐藏滚动条的div中：
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}
并将其添加到容器中
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}
