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>
其他回答
CSS可以用来隐藏滚动条吗?你会怎么做?
如果要从浏览器视口中删除垂直(和水平)滚动条,请添加:
style="position: fixed;"
到<body>元素。
Java脚本:
document.body.style.position = 'fixed';
CSS:
body {
position: fixed;
}
正如其他人已经说过的,使用CSS溢出。
但如果您仍然希望用户能够滚动该内容(滚动条不可见),则必须使用JavaScript。
在这里回答我的问题:隐藏滚动条,同时仍然可以使用鼠标/键盘滚动
我的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%;
}
使用CSS溢出属性:
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}
以下是更多示例:
溢出-x,溢出-y测试CSS溢出属性
这对我来说适用于简单的CSS财产:
.container {
-ms-overflow-style: none; // Internet Explorer 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
对于旧版本的Firefox,请使用:overflow:-moz滚动条none;