翻转卡不聚焦，双面滚动鼠标滚轮

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>