嗯，我读了所有相关的问题，但都没有解决我的问题.我正在试着做一个 carousel ，但它的滚动按钮没有垂直居中.我try 了top:Calc(200px/2)或100px，但它不能解决我的问题……因为无论 carousel 在哪里，它的位置都是静止的.我希望它位于 carousel 的中心，无论 carousel 在哪里，它都应该粘在 carousel 的中间.
let currentScrollPosition = 0;
let scrollAmount = 320;
const sCont = document.querySelector(".card-container");
const hScroll = document.querySelector(".horizontal-scroll");
const btnScrollLeft = document.getElementById("btn-scroll-left");
const btnScrollRight = document.getElementById("btn-scroll-right");
document.addEventListener('DOMContentLoaded', () => {
// i prefer adding event listeners in javascript.
btnScrollLeft.addEventListener('click', function(e) {
e.preventDefault();
scrollHorizontally(1);
});
btnScrollRight.addEventListener('click', function(e) {
e.preventDefault();
scrollHorizontally(-1);
});
});
function scrollHorizontally(val) {
let c_width = hScroll.offsetWidth,
box_width = sCont.offsetWidth,
amount = val * scrollAmount,
diff = c_width - box_width;
// to calculate the difference, we only need to subtract width of the div containing the cards.
currentScrollPosition = currentScrollPosition + amount;
if (currentScrollPosition > 0) {
// cap start
currentScrollPosition = 0;
btnScrollLeft.style.opacity = "0";
} else if (currentScrollPosition < diff) {
// cap end
currentScrollPosition = diff;
btnScrollRight.style.opacity = "0";
} else {
btnScrollLeft.style.opacity = "1";
btnScrollRight.style.opacity = "1";
}
sCont.style.left = currentScrollPosition + "px";
}<style>
.horizontal-scroll {
overflow-x: hidden;
}
.card-container {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-basis: 30%;
position: absolute;
gap: 10px;
left: 0;
transition: 1s left ease-out;
overflow-x:hidden
}
.card-container .card {
min-width: 240px;
flex: 1;
height: 200px;
width: 100%;
border: 1px solid #ccc;
background: #fff;
background: #00F260;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #0575E6, #00F260);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #0575E6, #00F260);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
text-align: center;
justify-content: space-between;
}
.card-container .card img {
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 100%;
float: none;
display: block;
object-fit: fill;
height: 180px;
}
/* btn */
.horizontal-scroll .btn-scroll {
background: 0;
border: 0;
border: 1px solid red;
padding: 0 10px;
z-index: 10;
cursor: pointer;
font-size: 40px;
color: #007bff;
}
.horizontal-scroll .btn-scroll:hover {
color: #ffffff;
background-color: #007bff;
border-radius: 10px;
}
.horizontal-scroll .btn-scroll:focus {
outline: none;
background-color: #007bff;
color: rgba(255, 255, 255, 1.0);
border-radius: 5px;
}
.horizontal-scroll #btn-scroll-left {
position: absolute;
left: 0;
}
.horizontal-scroll #btn-scroll-right {
position: absolute;
right: 0;
}
@media( max-width: 768px){
.card-container{
overflow-x: hidden;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sliding test</title>
</head>
<body>
<div class="horizontal-scroll">
<button class="btn-scroll" id="btn-scroll-left" onclick="scrollHorizontally(1)"><i class="fas fa-chevron-left"></i>
</button>
<button class="btn-scroll" id="btn-scroll-right" onclick="scrollHorizontally(-1)"><i class="fas fa-chevron-right"></i>
</button>
<div class="card-container">
<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 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>
<!--card-container-->
</div>
<!--horizontal-scroll-->
</body>
</html>