admin管理员组文章数量:1335825
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>
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>
1 Answer
Reset to default 0
<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
本文标签：
版权声明：本文标题：html - Front div of card in flip card style not scrolling with mouse scroll wheel- scrollbar is showing but can't scroll 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742394591a2466665.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论