[JS]スクロール検出イベント
20155 ワード
現在スクロールしている部分に合わせてタイトルフォーカスの効果を加えたいと思います.
特定の要素の絶対的な要素を求めます
最初に、
pageYOffsetの値(以下posyと略称する)が特定の数値範囲内である場合、各タイトルはフォーカスされる.
上の写真を例にとると、
posyが
0<= posY < 100の値である場合、ヘッダの家はフォーカスされ、100<= posY < 200はフォーカスされる.この方法は、スクリーンサイズが変更されるたびに値が異なるため、反応型Webページには適していません.
この問題を解決するために,各部分を組み合わせ,各部分の上端を基準とすることにした.
たとえば、
POSYは
#home의 최상단 <= posY < #aboutの最上位にある位置が正しければ、家を焦点にすることにした.
<body>
<header id="header"></header>
<section id="home"></section>
<section id="about"></section>
<section id="skills"></section>
<section id="work"></section>
<footer id="footer"></footer>
</body>const absoluteTop = window.pageYOffset + element.getBoundingClientRect().top;
출처: https://mommoo.tistory.com/85 [개발자로 홀로 서기]footerが上の要素と共に集束する問題があった.転がりが最下端にあるときに
footer(接触部)を合焦させるという問題が解決される.スクロールを最後までスクロールするかどうかを確認します
element.scrollHeight - element.scrollTop === element.clientHeight
출처: https://developer.mozilla.org/ko/docs/Web/API/Element/scrollHeightGoogle検索で見つけた他のブログも上記の方法を使用しています.
posY >= workTop && posY <= totalHeightですtotalHeight部分を埋めたいので数値が必要です.
スクロールが最下端にある場合、
scrollHeightの値はinnerHeightにほぼ等しいことが利用される.(画面サイズによる誤差範囲0-1)
let totalHeight = document.body.scrollHeight - this.window.innerHeight -1;
else if(posY >= workTop && posY <= totalHeight) {
} else {
}
totalHeight私が望むスクリーンサイズで正常に動作しているからです.
まずその方式を使いました.
後でもっと良い方法を見つけたら、修正します.
Window.pageYOffset
垂直スクロールされたドキュメントの数をpx単位で返す
scrollYおよびpageYOffsetは同じ役割を果たす.一部のブラウザでは
pageYOffsetしかサポートされていません.pageYOffsetの使用を推奨水平スクロールを表す
pageXOffset(=scrollX)も存在するリファレンス
https://developer.mozilla.org/ko/docs/Web/API/Window/pageYOffset
Element.getBoundingClientRect()
viewportに対する位置情報を返す方法.
私が使っているプログラムは
topで、要素を囲む角、Y座標を返します.*ビューポート:現在の画面に表示されている領域
以下の画像基準において、pageX、YはpageYOffset基準座標である.
ClientX,YはgetBoodingClientRect()です.トップデータム座標
画像ソース:https://ko.javascript.info/coordinates
リファレンス
https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect
https://ko.javascript.info/coordinates
Element.scrollHeight
ドキュメント全体の高さを返します.スクロールマスクを含む分です.
リファレンス
https://developer.mozilla.org/ko/docs/Web/API/Element/scrollHeight
https://ko.javascript.info/size-and-scroll-window
Window.innerWidth
ビューポートの高さをピクセル単位で戻す
リファレンス
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight
最終完了コード
HTML
<body>
<header id="header"></header>
<section id="home"></section>
<section id="about"></section>
<section id="skills"></section>
<section id="work"></section>
<footer id="footer"></footer>
</body>.focus {
color: #ECECEC;
border: 2.75px solid #ECECEC;
border-radius: 10px;
}// header for desktop
window.addEventListener('scroll', function() {
const posY = this.window.pageYOffset;
const home = this.document.querySelector('#home').getBoundingClientRect().top;
const about = this.document.querySelector('#about').getBoundingClientRect().top;
const skills = this.document.querySelector('#skills').getBoundingClientRect().top;
const work = this.document.querySelector('#work').getBoundingClientRect().top;
const homeTop = posY + home;
const aboutTop = posY + about;
const skillsTop = posY + skills;
const workTop = posY + work;
let totalHeight = document.body.scrollHeight - this.window.innerHeight -1;
if(posY >= homeTop && posY < aboutTop) {
} else if(posY >= aboutTop && posY < skillsTop) {
} else if(posY >= skillsTop && posY < workTop) {
} else if(posY >= workTop && posY <= totalHeight) {
} else {
}
});Reference
この問題について([JS]スクロール検出イベント), 我々は、より多くの情報をここで見つけました https://velog.io/@minbok/JS-스크롤-감지-이벤트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol