Флип-карта не фокусируется и не прокручивается колесом мыши с обеих сторон

Question

У меня есть флип-карта с двумя длинными надписями, и когда я на передней панели, она не фокусируется на прокрутке и не прокручивается колесиком мыши или пальцем, когда я на телефоне.

Я искал и использовал похожие коды и идеи, но ни одна из них не помогла мне. Я заранее благодарю вас, если вы могли бы помочь мне исправить это.

мой html:

<div class="flipCard"> 
  <div class="card" onclick="this.classList.toggle('flipped');"> 

    <div class="side front"><table><td>This is the front side of my flip card. It's a long text and the scroll doesn't focus and work with mouse wheel automatically.</td></table></div> 

    <div class="side back"><table><td>This is the back side of my flip card. It's a long text and the scroll focuses and works fine with mouse wheel.</td></table></div>

  </div>
</div>

, и это мое css извините, что я не мог обобщить это больше:

.flipCard {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   width: 400px;
   height: 200px;
   position: relative;
   margin: 50px auto;
}

.flipCard .card.flipped {
  transform:rotatey(-180deg);

}

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

.flipCard .card .side {
  width: 100%;
  height: 100%;
  padding: 10px;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  backface-visibility: hidden;  /* W3C */
  overflow: auto;
}

.flipCard .card .back {
  background: white;
  color: black;
  transform:rotatey(-180deg);
}

.flipCard .card .front {
  font-family: Georgia;
  font-size: 3em;
  text-align: center;
  background-color: #7030a0;
}

.flipCard .card .back {
  background-color: #dbb2f9;
  padding: 0.6em;
  font-family: Georgia;
  font-size: 1.0em;
  text-align: center;
}

table{
    height: 100%;
    width: 100%;
}
td{
    vertical-align: middle;
    text-align: center;
}
.front td{
  color: white;
  font-family: Georgia;
  font-size: 1.0em;
}
.back td{
  font-family: Georgia;
  font-size: 2.5em;
}

У меня тоже есть мой код: https://codepen.io/teslapixela/pen/xxGdvoG

Answer 1

Я думаю, что проблема в событиях касания и нажатия. На сенсорных устройствах событие касания запускается до события щелчка.

Я написал пример ниже (я использовал jQuery, чтобы написать решение быстрее :)):

$(document).ready(function() {
   if(window.matchMedia("(pointer: coarse)").matches) {
      // Touch device
      $('.card').on('touchstart touchmove', function(event) {     
           if (event.type == 'touchstart') {
              // Don't trigger the class toggle directly, user might be scrolling
              setTimeout(function() {
                if (event.type != 'touchmove') {
                   $(this).toggleClass('flipped'); 
                }
              }, 1);
           }
      });
   } else {  
      // Non touch device
      $('.card').on('click', function() {
           $(this).toggleClass('flipped'); 
      });
   }
});

.flipCard {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   width: 400px;
   height: 200px;
   position: relative;
   margin: 50px auto;
}

.flipCard .card.flipped {
  transform:rotatey(-180deg);

}

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

.flipCard .card .side {
  width: 100%;
  height: 100%;
  padding: 10px;
  cursor: pointer;
  position: relative;
  backface-visibility: hidden;  /* W3C */
  overflow: auto;
}

.flipCard .card .back {
  background: white;
  color: black;
  transform:rotatey(-180deg);
}

.flipCard .card .front {
  font-family: Georgia;
  font-size: 3em;
  text-align: center;
  background-color: #7030a0;
  position: absolute;
  z-index: 1;
}

.flipCard .card .back {
  background-color: #dbb2f9;
  padding: 0.6em;
  font-family: Georgia;
  font-size: 1.0em;
  text-align: center;
  position: absolute;
}

.flipCard .card.flipped .front {
   z-index: -1;
}

.flipCard .card.flipped .back {
  z-index: 1;
}

table{
	height: 100%;
	width: 100%;
}
td{
	vertical-align: middle;
	text-align: center;
}
.front td{
  color: white;
  font-family: Georgia;
  font-size: 1.0em;
}
.back td{
  font-family: Georgia;
  font-size: 2.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flipCard"> 
  <div class="card"> 
    
    <div class="side front"><table><td>This is the front side of my flip card. It's a long text and the scroll doesn't focus and work with mouse wheel automatically.</td></table></div> 
    
    <div class="side back"><table><td>This is the back side of my flip card. It's a long text and the scroll focuses and works fine with mouse wheel.</td></table></div>
    
  </div>
</div>