Bulma Overflow Touch

Last Updated : 10 Mar, 2022

In this article, we will learn about Bulma overflow touch mixin. This mixin allows that whether or not the touch devices should use momentum-based scrolling for an element. This mixin adds the -webkit-overflow-scrolling: touch; rule to the HTML element.

There is no specific class given by Bulma for creating an overflow touch mixin. We need to create our own class and style it using SASS mixins.

Syntax:

<div class="touch-scroll-mixin">
    <p>
      ....
    </p>
</div>

.touch-scroll-mixin {
    @include overflow-touch();
}

Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.

Example 1: The below example illustrates the Bulma overflow touch mixin.

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(); 
}

Output:

Bulma Overflow Touch

Example 2: Another example illustrating the Bulma overflow touch mixin.

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(); 
}