CSS | Propiedad overscroll-behavior

La propiedad overscroll-behavior se utiliza para establecer el comportamiento del navegador cuando se alcanza el límite de un área de desplazamiento. Esta propiedad se puede utilizar para evitar desplazamientos no deseados en páginas en las que hay varias áreas de desplazamiento. Es una forma abreviada de las propiedades overscroll-behavior-x y overscroll-behavior-y .

Sintaxis:

overscroll-behavior: auto | contain | none | initial | inherit

Valores de propiedad:

  • auto: se utiliza para establecer el comportamiento de desplazamiento por defecto. Toda la página junto con el elemento se desplazará incluso si se alcanza el límite del elemento. Es el valor predeterminado.

    Ejemplo:

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | overscroll-behavior
      </title>
      <style>
        .container {
          display: flex;
        }
      
        .main-content {
          width: 200px;
          background-color: lightgreen;
        }
      
        .smaller-box {
          overscroll-behavior: auto;
      
          height: 100px;
          width: 125px;
          margin: 25px;
          overflow-y: scroll;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>CSS | overscroll-behavior</b>
      <p>overscroll-behavior: auto</p>
      <div class="container">
        <div class="main-content">
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes and
          interview questions. The portal also
          has dedicated GATE preparation and
          competitive programming sections.<br><br>
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes and
          interview questions. The portal also
          has dedicated GATE preparation and
          competitive programming sections.
        </div>
        <div class="smaller-box">
          This is a smaller element that is also
          scrollable. The overscroll behavior
          can be used to control if the main
          content behind would scroll when this
          element's vertical boundary is reached.
        </div>
      </div>
    </body>
    </html>

    Salida: Desplazarse hacia abajo en el elemento más pequeño
    auto

  • contiene: se utiliza para establecer el comportamiento de desplazamiento por defecto solo en el elemento utilizado. Desplazar el elemento más allá de que haya alcanzado el límite no desplazará los elementos detrás de él. No se produciría ningún enstringmiento de desplazamiento en las áreas de desplazamiento vecinas.

    Ejemplo:

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | overscroll-behavior
      </title>
      <style>
        .container {
          display: flex;
        }
      
        .main-content {
          width: 200px;
          background-color: lightgreen;
        }
      
        .smaller-box {
          overscroll-behavior: contain;
      
          height: 100px;
          width: 125px;
          margin: 25px;
          overflow-y: scroll;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>CSS | overscroll-behavior</b>
      <p>overscroll-behavior: contain</p>
      <div class="container">
        <div class="main-content">
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes and
          interview questions. The portal also
          has dedicated GATE preparation and
          competitive programming sections.<br><br>
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes and
          interview questions. The portal also
          has dedicated GATE preparation and
          competitive programming sections.
        </div>
        <div class="smaller-box">
          This is a smaller element that is also
          scrollable. The overscroll behavior
          can be used to control if the main
          content behind would scroll when this
          element's vertical boundary is reached.
        </div>
      </div>
    </body>
    </html>

    Salida: Desplazarse hacia abajo en el elemento más pequeño
    contain

  • ninguno: se utiliza para evitar el enstringmiento de desplazamiento en todos los elementos. También se evita el comportamiento de desbordamiento de desplazamiento predeterminado.

    Ejemplo:

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | overscroll-behavior
      </title>
      <style>
        .container {
          display: flex;
        }
      
        .main-content {
          width: 200px;
          background-color: lightgreen;
        }
      
        .smaller-box {
          overscroll-behavior: none;
      
          height: 100px;
          width: 125px;
          margin: 25px;
          overflow-y: scroll;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>CSS | overscroll-behavior</b>
      <p>overscroll-behavior: none</p>
      <div class="container">
        <div class="main-content">
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes and
          interview questions. The portal also
          has dedicated GATE preparation and
          competitive programming sections.<br><br>
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes and
          interview questions. The portal also
          has dedicated GATE preparation and
          competitive programming sections.
        </div>
        <div class="smaller-box">
          This is a smaller element that is also
          scrollable. The overscroll behavior
          can be used to control if the main
          content behind would scroll when this
          element's vertical boundary is reached.
        </div>
      </div>
    </body>
    </html>

    Salida: Desplazarse hacia abajo en el elemento más pequeño
    none

  • initial: se utiliza para establecer el comportamiento de desplazamiento excesivo al valor predeterminado.

    Ejemplo:

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | overscroll-behavior
      </title>
      <style>
        .container {
          display: flex;
        }
      
        .main-content {
          width: 200px;
          background-color: lightgreen;
        }
      
        .smaller-box {
          overscroll-behavior: initial;
      
          height: 100px;
          width: 125px;
          margin: 25px;
          overflow-y: scroll;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>CSS | overscroll-behavior</b>
      <p>overscroll-behavior: initial</p>
      <div class="container">
        <div class="main-content">
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes and
          interview questions. The portal also
          has dedicated GATE preparation and
          competitive programming sections.<br><br>
          GeeksforGeeks is a computer science
          portal with a huge variety of well
          written and explained computer science
          and programming articles, quizzes and
          interview questions. The portal also
          has dedicated GATE preparation and
          competitive programming sections.
        </div>
        <div class="smaller-box">
          This is a smaller element that is also
          scrollable. The overscroll behavior
          can be used to control if the main
          content behind would scroll when this
          element's vertical boundary is reached.
        </div>
      </div>
    </body>
    </html>

    Salida: Desplazarse hacia abajo en el elemento más pequeño
    initial

  • heredar: se usa para configurar el comportamiento de desplazamiento para heredar del padre.

Navegadores compatibles: los navegadores compatibles con la propiedad overscroll-behavior se enumeran a continuación:

  • cromo 63.0
  • Firefox 59.0
  • Borde 18.0
  • Ópera 50.0

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *