javascript - 如何在href中使用没有id的目标子div?
问题描述
我正在使用 href 属性来定位包装器 div 中的滑块,但在 Vue 中它推动了该 id href 的路由,是否有任何替代方法不使用 href 来通过 id 来定位 div 中的滑块?
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>
解决方案
您可以用Element.scrollIntoView() 函数替换href
我在你的演示中编辑:
<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" });
};
推荐阅读
- android - 是否可以在硬件层面抵消 Android 的 Vsync 时序?
- javascript - Javascript window.scroll 不适用于 IE 11 中的选项对象
- java - 验证 Oracle API Gateway 上的内容
- r - 为什么在函数中使用 tidycensus get_decennial() 会失败?
- r - 使用 lapply 转置列的一部分并将其作为新列添加到数据框中
- python - 如何以编程方式返回关键字的位置(行和列)
- javascript - R闪亮中的ID和类组合的Javascript问题
- c++ - 将空参数列表函数从 C 转换为 C++
- javascript - 角度构建文件未捆绑在 dist 文件夹中
- c - 从睡眠中唤醒主线程