さて今回は、スクロール量の取得や、今見えている画面上部から特定の要素までの距離の取得方法などを紹介していきます。
これを使うことで、一定以上スクロールをしたら「スクロールトップボタン」が現れたり、ヒーローイメージが消えた瞬間から「スティッキーヘッダー」を出したり、スクロール量に応じて好きなものを出現させることができるようになります。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。
それでは本文へ、レッツゴー！
スクロール量の取得方法
スクロールするたびにイベントを発火させ続ける
まずは大前提となることがあります。
スクロール量を取得するので、スクロールしている間は、常にスクロール量を測定し続ける必要があります。
そのためスクロール量の取得は、スクロールする度にでイベントを発火させ、取得させ続けています。
<script>
window.addEventListener('scroll', function(){
この中でスクロール量を取得させる！
});
</script>addEventListenerについて分からない方はこちら
では、スクロール量の取得に移っていきましょう！
window.scrollYでスクロール量を取得
スクロール量の取得は
window.scrollYで取得することができます。
これを先ほどのスクロールに応じて発火するイベントの中に放り込むことで、スクロール量を常に取得することができるようになります。
サンプルコード
これで、スクロール量の取得は完了です。
スクロールに応じて、consoleにスクロール量が出力されていることが確認できます。
<div style="height: 2000px"></div>
<script>
window.addEventListener('scroll', function(){
console.log(window.scrollY);
});
</script>せっかくなので、スクロールトップボタンを実装してみましょう！
スクロールトップボタン
極力わかりやすい記述にしたかったので、超簡易的なスクロールトップボタンを実装しました。
<style>
button{
width: 60px;
height: 60px;
position: fixed;
right: 0px;
bottom: 0px;
transform: translateY(60px);
transition: all .3s;
}
button.fadeIn{
transform: translateY(0px);
}
</style>
<button>ボタン</button>
<div style="height: 2000px"></div>
<script>
const button = document.querySelector('button')
window.addEventListener('scroll', function(){
const scrollAmount = window.scrollY;
if(scrollAmount >= 500){
button.classList.add('fadeIn');
}else{
button.classList.remove('fadeIn');
}
});
button.addEventListener('click', function(){
window.scrollTo({top: 0, behavior: 'smooth'});
});
</script>querySelectorについて分からない方はこちら
addEventListenerについて分からない方はこちら
ifについて分からない方はこちら
classListについて分からない方はこちら
スクロールトップボタンについての詳細は、別記事にて紹介しています。
ユーザビリティを考慮したウェブサイトには、もはや必須のアイテムです。
ウィンドウ上部から特定の要素までの距離
getBoundingClientRect()に、tomもしくはbottomを添えることで、取得できます。
// ウィンドウ上部から要素のてっぺんまでの距離を取得
要素.getBoundingClientRect().top
// ウィンドウ上部から要素のお尻までの距離を取得
要素.getBoundingClientRect().bottomウィンドウ上部から特定の要素までの距離・・・少し言葉として難しいですね。
実際にサンプルコードを使って目で確かめてみましょう。
サンプルコード
グレーの箱が、ウィンドウ画面上部にピッタリくっついた時に上部が0pxに、
ウィンドウ画面上部からピッタリ消えた時に下部が0pxになっているのが確認できます。
<style>
.sampleBox{
width: 200px;
height: 100px;
background-color: #ccc;
}
</style>
<div style="height: 1000px"></div>
<div class="sampleBox"></div>
<div style="height: 1000px"></div>
<script>
const sampleBox = document.querySelector('.sampleBox');
window.addEventListener('scroll', function(){
console.log(`上部：${sampleBox.getBoundingClientRect().top} px`);
console.log(`下部${sampleBox.getBoundingClientRect().bottom} px`);
});
</script>これを使うことで、スティッキーヘッダーの実装ができるようになります。
スティッキーヘッダー
こちらもスクロールトップボタン同様、極力シンプルなスティッキーヘッダーを実装しました。
getBoundingClientRect().bottomが0を切った瞬間（ヒーローイメージが画面からピッタリ消えた瞬間）、スティッキーヘッダーが現れるという仕組みになっています。
<style>
.stickyHeader{
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
position: fixed;
top: -100%;
transition: all .3s;
}
.stickyHeader.on{
top: 0px;
}
.heroImage{
height: 700px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="stickyHeader">スティッキーヘッダー</div>
<div class="heroImage">ヒーローイメージ</div>
<div style="height: 2000px"></div>
<script>
const stickyHeader = document.querySelector('.stickyHeader');
const heroImage = document.querySelector('.heroImage');
window.addEventListener('scroll', function(){
const stickyTrigger = heroImage.getBoundingClientRect().bottom;
if(stickyTrigger < 0){
stickyHeader.classList.add('on');
}else{
stickyHeader.classList.remove('on');
}
});
</script>スティッキーヘッダーについても、詳しくは別記事にて紹介しています。
要素のサイズ取得方法
要素のサイズ取得方法
要素の高さはclientHeight、幅はclientWidthで取得することができます。
要素.clientHeight
要素.clientWidth仕様として、paddingは含まれますが、marginは含まれません。
用途としては・・・あまりパッと出てこないです・・・。
サンプルコード
<style>
.sampleBox{
width: 200px;
height: 100px;
padding: 15px;
margin: 15px;
background-color: #ccc;
}
</style>
<div class="sampleBox"></div>
<script>
const sampleBox = document.querySelector('.sampleBox');
console.log(`高さ：${sampleBox.clientHeight} px`);
console.log(`幅：${sampleBox.clientWidth} px`);
</script>
