CSS 隐藏滚动条 但可以滚动
2016-11-14 本文已影响0人
_流浪的猫_
- 垂直滚动，用鼠标滚轮滚动
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="utf-8" />
<style>
.parent {
height: 80px;
width: 100px;
overflow: hidden;
}
.content{
height: 80px;
width: 126px; /* 多出26像素是滚动条的位置，会被父容器盖住就看不到了 */
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
<p>整一长段文章进来看效果</p>
</div>
</div>
</body>
</html>
- 横向滚动
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="utf-8" />
<style>
.parent {
height: 80px;
width: 100px;
overflow: hidden;
}
.content {
height: 106px; /* 多出26像素是滚动条的位置，会被父容器盖住就看不到了 */
width: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
p {
white-space: nowrap; /* 不换行 */
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
<p>整一长段文章进来看效果</p>
</div>
</div>
</body>
</html>
- 其他垂直滚动方法
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="utf-8" />
<style>
.outer-container,.content {
width: 200px; height: 200px;
}
.outer-container {
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute; left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="content">
整一长段文章进来看效果
</div>
</div>
</div>
</body>
</html>
