In diesem Artikel werden wir darüber erfahren Bulma-Überlauf-Touch-Mixin. Dieses Mixin ermöglicht, ob die Touch-Geräte für ein Element impulsbasiertes Scrollen verwenden sollen oder nicht. Dieses Mixin fügt die hinzu -Webkit-Überlauf-Scrollen: berühren; Regel zum HTML-Element.
Es gibt keine spezifische Klasse von Bulma zum Erstellen eines Überlauf-Touch-Mixins. Wir müssen unsere eigene Klasse erstellen und sie mit SASS-Mixins gestalten.
Syntax:
<div class="touch-scroll-mixin">
<p>
....
</p>
</div>
.touch-scroll-mixin {
@include overflow-touch();
}Notiz: Für die folgenden Beispiele müssen Sie die Implementierung von SASS-Mixins kennen. Bitte sehen Sie sich die Voraussetzung an, die auf dem Link angegeben ist, und implementieren Sie dann den folgenden Code.
Beispiel 1: Das folgende Beispiel zeigt das Bulma Overflow Touch Mixin.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<link rel="stylesheet"
href="demo.css">
</head>
<body>
<div class="content container has-text-centered">
<h1 class="title has-text-success">
GeekforGeeks
</h1>
<h1 class="subtitle">
Bulma Overflow touch Mixin
</h1>
</div>
<div class="container">
<div class="touch-scroll-mixin">
<p class="has-background-success has-text-white">
This text has the touch scroll mixin applied.
</p>
</div>
<div class="auto-scroll-mixin has-text-white">
<p class="has-background-success">
This text does not has a mixin.
</p>
</div>
</div>
</body>
</html>
|
CSS
@mixin overflow-touch() {
-webkit-overflow-scrolling: touch;
width: 100%;
overflow: auto;
}
p {
width: 200%;
border: 2px solid #eaf2f4;
padding: 10px;
}
.touch-scroll-mixin {
@include overflow-touch();
}
|
Ausgabe:
![Bulma Overflow-Touch]()
Bulma Overflow-Touch
Beispiel 2: Ein weiteres Beispiel, das das Bulma Overflow Touch Mixin veranschaulicht.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<link rel="stylesheet"
href="demo.css">
</head>
<body>
<div class="content container has-text-centered">
<h1 class="title has-text-success">
GeekforGeeks
</h1>
<h1 class="subtitle">
Bulma Overflow touch Mixin
</h1>
</div>
<div class="container">
<div class="touch-scroll-mixin">
<h1 class="touch title">
Welcome to GeekforGeeks. Find programming
articles, tutorials, and more.
</h1>
</div>
</div>
</body>
</html>
|
CSS
@mixin overflow-touch() {
-webkit-overflow-scrolling: touch;
width: 100%;
overflow: auto;
}
.touch {
width: 200%;
border: 2px solid #eaf2f4;
padding: 10px;
}
.touch-scroll-mixin {
@include overflow-touch();
}
|
Ausgabe:
![Bulma Overflow-Touch]()
Bulma Overflow-Touch
Referenz: https://bulma.io/documentation/utilities/mixins/#overflow-touch
