- 垂直滾動(dòng)拷况，用鼠標(biāo)滾輪滾動(dòng)
<!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像素是滾動(dòng)條的位置屡萤，會(huì)被父容器蓋住就看不到了 */
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
<p>整一長段文章進(jìn)來看效果</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像素是滾動(dòng)條的位置砍濒，會(huì)被父容器蓋住就看不到了 */
width: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
p {
white-space: nowrap; /* 不換行 */
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
<p>整一長段文章進(jìn)來看效果</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">
整一長段文章進(jìn)來看效果
</div>
</div>
</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
