CODEWITHSUNDEEP
htmlcssoverflow
learner
learner

Reputation: 5

Front div of card in flip card style not scrolling with mouse scroll wheel- scrollbar is showing but can't scroll down unless clicking

I have a "flip card" design with an image on the front side div and text on the back side div. The back of the card lets you scroll down with the mouse scroll wheel. The front of the card with the image does not even though there is a scrollbar showing. I have height defined and tried playing around with the overflow in different divs, but I can't get the front div to scroll down without you having to manually click the scrollbar.

CSS:

.cards {
    display: flex;
    flex-direction: row;
    padding: 0px;
}

.flip-card {
    background-color: transparent;
    perspective: 1000px;
    margin: 1em 1.4em 1em 0;
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 350px;
    height: 50vh;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.flip-card-front {
    justify-content: flex-start;
    align-items: baseline;
}

.flip-card-back {
    transform: rotateY(180deg);
    justify-content: center;
    align-items: center;
}

.flip-card-front,
.flip-card-back {
    display: flex;
    position: absolute;
    backface-visibility: hidden;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 15px;
    color: #222;
    background: whitesmoke;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    z-index: 1;
    /* Ensure unflipped card stays at the back */
    overflow-y: auto;
    /* makes it so there's no extra whitespace under image */
}

.flip-card:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #333;
}

HTML:

<ul class="cards">
                        <li class="flip-card" role="button" tabindex="0" aria-label="flip card" data-front="" data-back="text">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
    
                                </div>
                                <div class="flip-card-back">
                                    <p></p>
                                </div>
                            </div>
                        </li></ul>

Upvotes: 0

Views: 33

Answers (1)

khusbu patel
khusbu patel

Reputation: 29

<html>

<head>
  <title>Backface-Visibility</title>
  <style>
    body {
      font-family: arial, helvetica;
      background: #eee;
    }
    
    .card {
      width: 300px;
      height: 300px;
      border: 0px solid black;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -150px;
      perspective: 500px;
    }
    
    .content {
      width: 100%;
      height: 100%;
      position: absolute;
      transition: transform 1s;
      transform-style: preserve-3d;
    }
    
    .content.flipped {
      transform: rotateY(180deg);
    }
    
    .front,
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #fff;
      color: tomato;
      font-size: 60px;
      text-align: center;
      line-height: 300px;
      border-radius: 5px;
      backface-visibility: hidden;
      overflow: auto;
    }
    
    .back {
      background: tomato;
      color: #fff;
      transform: rotateY(180deg);
    }
  </style>
</head>

<body>
  <div class="card" onclick="flipCard()">
    <div class="content" id="cardContent">
      <div class="front">Front Fro ntF ront Fro nFront Fro ntF ront Fro nFront Fro ntF ront Fro nFront Fro ntF ront Fro nFront Fro ntF ront Fro nt</div>
      <div class="back">Back!</div>
    </div>
  </div>

  <script>
    function flipCard() {
      const content = document.getElementById('cardContent');
      content.classList.toggle('flipped');
    }
  </script>
</body>

</html>

You have to use JS for back flipping on click... like this example

Upvotes: 0

Related Questions