ホームページを作っている時に、CSSは便利で、もはやJavascriptを使わなくてもアニメーションから条件分岐までできてしまう状態なんですが、
今回はCSSではどうやってもできなかった、ページ内の特定要素がカルーセル的に内部スクロールするという場面で、滑らかに内部スクロールする方法があったので、ご紹介。
ちなみに、ハッシュリンクを使うと、http://example.com/#contentと言うふうに、URLにハッシュ値が付いてしまうのですが、今回の方法を使うと、URLも汚さずに適用できるので、LPなどでも使える技です。
簡単にカルーセルが作れます。
-
コンテンツ-1
-
コンテンツ-2
-
コンテンツ-3
index.html
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<ul class="carousel wrap-clear">
<li id="content-1">
<p>コンテンツ-1</p>
<div class="button">
<a></a>
<a href="#content-2">next</a>
</div>
</li>
<li id="content-2">
<p>コンテンツ-2</p>
<div class="button">
<a href="#content-1">prev</a>
<a href="#content-3">next</a>
</div>
</li>
<li id="content-3">
<p>コンテンツ-3</p>
<div class="button">
<a href="#content-2">prev</a>
<a></a>
</div>
</li>
</ul>
style.css
*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
ul.carousel{
display:flex;
width:300px;
margin:0 auto;
border:1px solid black;
border-radius:10px;
overflow:hidden;
white-space:normal;
padding:0;
}
ul.carousel > li{
list-style:none;
min-width:100%;
margin:0;
padding:20px;
white-space:normal;
}
ul.carousel > li p{
padding:0;
margin:0;
}
ul.carousel > li .button{
margin-top:50px;
display:flex;
justify-content:space-around;
}
ul.carousel > li a{
text-decoration:none;
width:100px;
text-decoration:none;
cursor:pointer;
padding:10px 20px;
text-align:center;
font-size:0.9em;
font-weight:bold;
color: #fff;
background-color: #eb6100;
border-bottom: 5px solid #b84c00;
}
ul.carousel > li a:active{
transform:translateY(3px);
background: #f56500;
border-bottom: 2px solid #b84c00;
}
ul.carousel > li a:not([href]){
opacity:0;
}
main.js
function Main(){
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault()
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
})
})
})
}
switch(document.readyState){
case "complete":
case "interactive":
new Main()
break
default:
window.addEventListener("DOMContentLoaded", (()=>new Main()))
}
解説
今回のmain.jsをそのまま別のページに適用しても問題なく動作します。 重要なのは、以下の部分です。document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault()
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
})
})
})
aタグのhefで#から始まっている要素のみを一括してイベント登録するという設定を行っています。
e.preventDefault() は、その他イベント処理を一旦停止して、これでURLにハッシュ値が付与されるのを防いでいます。
次に、scrollIntoView()という命令は、なめらかにスクロールしてくれるという、今回の用途ドンピシャのJSの命令です。
参考: Element: scrollIntoView() メソッド
0 件のコメント:
コメントを投稿