Heim > Artikel > Web-Frontend > Zwei Möglichkeiten, die Bildlaufleiste mithilfe von CSS auszublenden, wenn der Text die Bildlaufanzeige überschreitet (Codebeispiel)
Zwei Möglichkeiten, die Bildlaufleiste mithilfe von CSS auszublenden, wenn der Text die Bildlaufanzeige überschreitet (Codebeispiel)
- 青灯夜游Original
- 2018-10-27 15:19:518203Durchsuche
Wie kann man die scrollende Anzeige von Text über den Teil hinaus realisieren und die Bildlaufleiste ausblenden? In diesem Artikel werden Ihnen zwei Möglichkeiten vorgestellt, mit CSS den Scroll-Anzeigeeffekt zu erzielen, nachdem der Text den Grenzwert überschreitet, und die Bildlaufleiste auszublenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Um eine scrollende Anzeige in CSS zu erreichen, nachdem der Text den Grenzwert überschreitet, verwenden wir meiner Meinung nach das CSS-Überlaufattribut. Es kann verwendet werden, wenn der Text das Limit überschreitet und der Inhalt beim Zuschneiden angezeigt wird. Zeigen Sie den verbleibenden Inhalt als Bildlaufleiste an, um die Anzeige zu erleichtern. Schauen wir uns anhand eines einfachen Codebeispiels an, wie Sie die Bildlaufleiste des CSS-Überlaufattributs ausblenden.
Methode 1: Verwenden Sie innere und äußere Verschachtelung, um zu simulieren
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分滚动显示，滚动条隐藏</title>
</head>
<style type="text/css">
#box {
/* 父容器设置宽度, 并超出部分不显示 */
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid red;
}
#box > div {
/* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
width: 317px;
height: 200px;
line-height: 30px;
overflow-y: scroll;
padding: 5px;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动,滚动条隐藏 -->
<div id="box">
<div>
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。
</div>
</div>
</body>
</html>Rendering:
Diese Methode ist mit allen Browsern kompatibel, aber ihre Verwendung ist umständlicher. Sie können keinen Stil für die Bildlaufleiste deklarieren, wenn Sie sie verwenden
Methode 2: Nutzen Sie die neuen Funktionen von CSS 3 -webkit-scrollbar,
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分滚动显示，滚动条隐藏</title>
</head>
<style type="text/css">
#box {
width: 300px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
line-height: 30px;
margin: 100px auto;
border: 1px solid red;
}
#box::-webkit-scrollbar {
display: none;
}
</style>
<body>
<!-- 兼容大部分浏览器，超出部分滚动,滚动条隐藏 -->
<div id="box">
<div>
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。<br />
这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。
</div>
</div>
</body>
</html>Rendering:
Diese Methode ist bequemer zu verwenden, aber nicht mit Firefox und IE kompatibel.
Zusammenfassung: Die beiden in diesem Artikel vorgestellten Methoden zur Implementierung der Bildlaufanzeige nach Überschreiten des Texts und zum Ausblenden der Bildlaufleiste haben jeweils ihre eigenen Vor- und Nachteile. Sie können es selbst ausprobieren Um Ihr Verständnis zu vertiefen, wählen Sie die Verwendung entsprechend Ihren eigenen Bedürfnissen. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter: CSS-Basis-Video-Tutorial , HTML-Video-Tutorial , Bootstrap-Video-Tutorial !
Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, die Bildlaufleiste mithilfe von CSS auszublenden, wenn der Text die Bildlaufanzeige überschreitet (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!