Breaking News: Grepper is joining You.com. Read the official announcement!

html card vertical scrolling using mouse scroll wheel

Cuaresma, Pauline Y. answered on March 21, 2023 Popularity 1/10 Helpfulness 1/10

answer html card vertical scrolling using mouse scroll wheel

related html card horizontal scrolling using mouse scroll wheel

html card vertical scrolling using mouse scroll wheel

Comment

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vertical Scrollable Div Cards with Mouse Scroll Wheel</title>
    <style>
    #card-container {
      height: 300px;
      overflow-y: scroll;
      /* hide the scrollbar */
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
  }
    /* hide the scrollbar in webkit browsers */
    #card-container::-webkit-scrollbar {
        display: none;
    }
      #card-container {
        height: 300px;
        overflow-y: scroll;
      }
      .card {
        display: block;
        width: 200px;
        height: 300px;
        margin-bottom: 10px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <div id="card-container" onwheel="scrollVertically(event)">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
      <div class="card">Card 5</div>
      <div class="card">Card 6</div>
    </div>

    <script>
      function scrollVertically(event) {
        event.preventDefault();
        const container = document.getElementById("card-container");
        container.scrollTop += event.deltaY;
      }
    </script>
  </body>
</html>

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: card html mouse scroll using vertical-scrolling whatever

Link to this answer
Share Copy Link

Contributed on Mar 22 2023

Cuaresma, Pauline Y.

0 Answers Avg Quality 2/10

Closely Related Answers

html card horizontal scrolling using mouse scroll wheel

Comment

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Horizontal Scrollable Div Cards with Mouse Scroll Wheel</title>
    <style>
    #card-container {
      white-space: nowrap;
      overflow-x: scroll;
      /* hide the scrollbar */
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
  }
    /* hide the scrollbar in webkit browsers */
    #card-container::-webkit-scrollbar {
        display: none;
    }
      #card-container {
        white-space: nowrap;
        overflow-x: scroll;
      }
      .card {
        display: inline-block;
        width: 200px;
        height: 300px;
        margin-right: 10px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <div id="card-container" onwheel="scrollHorizontally(event)">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
      <div class="card">Card 5</div>
      <div class="card">Card 6</div>
      <div class="card">Card 7</div>
      <div class="card">Card 8</div>
      <div class="card">Card 9</div>
      <div class="card">Card 10</div>
    </div>

    <script>
      function scrollHorizontally(event) {
        event.preventDefault();
        const container = document.getElementById("card-container");
        container.scrollLeft += event.deltaY;
      }
    </script>
  </body>
</html>

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: using card mouse horizontal-scrolling whatever scroll html

Link to this answer
Share Copy Link

Contributed on Mar 21 2023

Cuaresma, Pauline Y.

0 Answers Avg Quality 2/10

html card vertical scrolling using mouse scroll wheel

Contents

More Related Answers

html card vertical scrolling using mouse scroll wheel

Closely Related Answers

html card horizontal scrolling using mouse scroll wheel

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.