如何使用目标子div没有id在href?

Question

我使用的是href属性的目标滑块包装div，但在Vue它推动该id href的路由，是任何替代不使用href的目标滑块在div的id?

Vue中的href将被点击到该id的新路由，这就是为什么我找到替代禁用它或使用另一种方式来瞄准盒子?

const slide = document.querySelector(".slides")
slide.addEventListener('scroll', function(e) {
console.log(e.target.scrollLeft)
const slide2 = document.querySelector("#slide-2")
console.log(slide2.offsetWidth)
})

* {
box-sizing: border-box;
}
.slider {
width: 400px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides>div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides>div:target {
/*     transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider>a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider>a:active {
top: 1px;
}
.slider>a:focus {
background: #000;
}

/* Don't need button navigation */
@supports (scroll-snap-type) {
.slider>a {
display: none;
}
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74abe2, #5563de);
font-family: "Ropa Sans", sans-serif;
}

<div class="slider">
<a href="#slide-1">1</a>
<a href="#slide-2">2</a>
<a href="#slide-3">3</a>
<a href="#slide-4">4</a>
<a href="#slide-5">5</a>
<div class="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>

Answer 1

可以替换href使用Element.scrollIntoView()

我在你的演示中编辑:

Codepen

<a onclick="srollToPosition(1)">1</a>
<a onclick="srollToPosition(2)">2</a>
<a onclick="srollToPosition(3)">3</a>
<a onclick="srollToPosition(4)">4</a>
<div class="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>

Javascript:

const srollToPosition = (slideNumber) => {
const slide = document
.getElementById(`slide-${slideNumber}`)
.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
};