En este artículo, aprenderemos sobre Bulma overflow touch mixin . Esta combinación permite que los dispositivos táctiles utilicen o no el desplazamiento basado en impulso para un elemento. Este mixin agrega -webkit-overflow-scrolling: touch; regla al elemento HTML.
Bulma no da una clase específica para crear una mezcla táctil desbordante. Necesitamos crear nuestra propia clase y diseñarla usando mixins SASS.
Sintaxis:
<div class="touch-scroll-mixin">
<p>
....
</p>
</div>
.touch-scroll-mixin {
@include overflow-touch();
}
Nota: debe conocer la implementación de mixins SASS para los siguientes ejemplos. Consulte el requisito previo proporcionado en el enlace y luego implemente el siguiente código.
Ejemplo 1: El siguiente ejemplo ilustra la mezcla táctil de desbordamiento de Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </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();
}
Producción:
Toque de desbordamiento de Bulma
Ejemplo 2: Otro ejemplo que ilustra la mezcla táctil overflow de Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </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();
}
Producción:
Toque de desbordamiento de Bulma
Referencia: https://bulma.io/documentation/utilities/mixins/#overflow-touch
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA