ホームページ > 記事 > ウェブフロントエンド > CSSで隠したい部分以上にスクロールバーを設定する方法
CSSで隠したい部分以上にスクロールバーを設定する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-09 18:17:544330ブラウズ
方法: 1. 「-webkit-scrollbar」属性設定、構文「-webkit-scrollbar{display:none;}」を使用します; 2. 親要素に「overflow: hidden」スタイルを設定しますdiv、および親要素と子要素の幅を設定します。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
方法 1. css 3 -webkit-scrollbar の新機能を使用しますが、この方法は Firefox および IE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分隐藏滚动条</title>
</head>
<style type="text/css">
#box {
width: 500px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
line-height: 30px;
text-align: center;
}
#box::-webkit-scrollbar {
display: none;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
<div id="box">
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
</div>
</body>
</html>と互換性がありません。方法 2 、内部ネストと外部ネストを利用する、シミュレーション、すべてのブラウザと互換性あり、方法 1 に比べて面倒、使用時にスクロール バーのスタイルを宣言できない
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分滚动条</title>
</head>
<style type="text/css">
#box {
/* 父容器设置宽度, 并超出部分不显示 */
width: 500px;
height: 300px;
overflow: hidden;
}
#box > div {
/* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
width: 517px;
height: 300px;
line-height: 30px;
text-align: center;
overflow-y: scroll;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
<div id="box">
<div>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
</div>
</div>
</body>
</html> 推奨学習: CSS ビデオ チュートリアル
以上がCSSで隠したい部分以上にスクロールバーを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSシャドウの作り方次の記事：CSSシャドウの作り方