私は理解できない奇妙な行動をしているフォトギャラリーを持っています。画像を表示するはずのサムネイルをクリックすると、それだけでなく、ページを上にスクロールします。ギャラリーが画面の上部の少し下に表示されている場合は上にスクロールし、画面の上部を通過している場合は、ギャラリーセクションの上部が画面の上部に揃うまで下にスクロールします。画面。
私はcodepenで行ったことを複製しようとしました：https：//codepen.io/dmontesi/pen/VJZeVq 。私はSCSS / HTMLのみを使用しています。
<!-- Gallery -->
<section class="wrapper">
<div class="wrapper__gall">
<ul class="slides">
<li id="slide1"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/49/architecture-1477103_960_720.jpg" alt="" /></li>
<li id="slide2"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/48/architecture-1477101_960_720.jpg" alt="" /></li>
<li id="slide3"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/46/architecture-1477099_960_720.jpg" alt="" /></li>
</ul>
<ul class="thumbnails">
<li>
<a href="#slide1"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/49/architecture-1477103_960_720.jpg" /></a>
</li>
<li>
<a href="#slide2"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/48/architecture-1477101_960_720.jpg" /></a>
</li>
<li>
<a href="#slide3"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/46/architecture-1477099_960_720.jpg" /></a>
</li>
</ul>
</div>
</section>
次のスライドのみを表示し、画面上のユーザーの位置を移動しないようにします。
（ここで完全なコードを見ることができます：Codepen）
質問：
ナビゲーションリンクをクリックすると、画像の上部にスクロールするのはなぜですか？そしてそれを防ぐ方法は？
回答：
まあ、それはリンクの自然な振る舞いです。それはアンカーリンクと呼ばれます。
を使用する<a href="#slide1">場合、ユーザーがそれをクリックすると、ページはid = slide1。を含む要素にスクロールします。
（を追加することでonclick="event.preventDefault()"）それを防ぐことはできますが、それはcss:targetルールを使用できなくなったことを意味します。これは、ターゲット画像が他の画像の上に表示されなくなることを意味します。
代わりに、javascriptを使用して、完全な動作を制御できます。
<a href="#slide1" onclick='navigate(event)'>
active、現在のactive要素からクラスを与え、クリックされた要素にそれを与える必要があります。このような：function navigate(event){
//get active element
var active = event.target.closest(".wrapper").getElementsByClassName("active")[0];
//remove class "active" from active element
if(active)active.classList.remove("active");
//get target element from link
var target = document.getElementById(event.target.closest("a").getAttribute("href").replace("#",""));
//add class "active" to the target
target.classList.add("active");
//prevent default link behaviour
event.preventDefault();
}
li:targetセレクターが置き換えられます）。.slides li.active {
z-index: 3;
}
.slides li:not(.active) {
z-index: 0;
}
（ここで完全なコードを見ることができます：Codepen）
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加