スクロール1(ステップ28)

31123 ワード
js-study テキストリンク

学ぶべき概念。

  • スクロール
  • document.body.clientHeight
  • window.innerHeight
  • window.outerHeight

    • スクロール


    応答ページのスクロール

    チャレンジ1


    エッジなしページ
    重要度:5
    果てしないページを作成してください.訪問者が最後までスクロールすると、現在の日付-時刻がテキストに自動的に追加され、訪問者がスクロールする回数が増えるようになります.
    イニシャルコード
    <!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
 
<body>
<div id='date'>Scroll me</div>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>

</body>
<script>
let dateTemplate = (date)=>`<p>Date: ${date}</p>`
let dateDom = document.getElementById('date')

window.addEventListener('scroll',function(event){
 dateDom.innerHTML += dateTemplate(new Date());

})

</script>

</html>
    ブラウザのスクロールサイズが小さく、<p>のラベルを強引に作成し、今からスクロールすればいいです.

    課題1修正


    デフォルトのブラウザ画面と同じサイズのコンテンツを作成し、スクロール中に追加のコンテンツを生成することを目的としています.

    document.body.clientHeight VS window.innerHeight


    document.body.ClientHeight:bodyラベル内のclientが持つ高さ.

    例えば、現在の身体部分の高さ(document.body.clientHeight)は右側が206である.
    window.InnerHeight:ブラウザ画面全体で、F 12などの開発ツールを除く
    window.OuterHeight:開発者ツール(F 12など)の一部をブラウザ画面全体に含める
    Ex)次の図は、ブラウザの開発者ツールが占める割合を示しています.これらのツールの数字は小さいので、拡大して数字を見てください.


    開発者ツール画面のブラウザアプリケーションの高さに応じて、window.innerHeightの値が変化することがわかります.window.outerHeight は固定されています
    (もちろん、ノートパソコンブラウザ全体のサイズを縮小するとwindow.outherHeightが小さくなります.)

    修正課題1

    <!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id='date'>Scroll me</div>
</body>
<script>
let dateTemplate = (date)=>`<p>Date: ${date}</p>`
let dateDom = document.getElementById('date')

while(document.body.clientHeight<window.innerHeight)
{
   dateDom.innerHTML += dateTemplate(new Date());
}

window.addEventListener('scroll',function(event){
 dateDom.innerHTML += dateTemplate(new Date());
})

</script>

</html>
    追加されたセクション
    while(document.body.clientHeight<window.innerHeight)
{
   dateDom.innerHTML += dateTemplate(new Date());
}
    既存のbodyのコンテンツを最背面のheight部分まで生成し続け、無限のページをスクロールします.

    InsertAdjacentHTMLを使用してコードを変更する

    <!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>
<div id='date'>Scroll me</div>
</body>
<script>
let dateTemplate = (date)=>`<p>Date: ${date}</p>`
let dateDom = document.getElementById('date')

while(document.body.clientHeight<window.innerHeight)
{
   dateDom.innerHTML += dateTemplate(new Date());
}

window.addEventListener('scroll',function(event){
  dateDom.insertAdjacentHTML('beforeend',dateTemplate(new Date()))
})

</script>

</html>
    このように扱うこともできます.

    に感銘を与える


    よく考えてみると、私の開発をスクロールするとき、スクロールが進むにつれて、過去に書いた文章がスクロールするときに現れ続けることがわかります.急にこんなことになるのではないかと思った.

    フィードバック

    스크롤할 때마다 Date를 담은 DOM 요소를 추가하는 것으로 보이는데, 이렇게 되면 위쪽 방향으로 스크롤할 때도 요소가 추가되지않을까요?の意見で修正します.

    document.documentElement.scrollTop


    この試みで修正します.
    <!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>
<div id='date'>Scroll me</div>
</body>
<script>
let dateTemplate = (date)=>`<p>Date: ${date}</p>`
let dateDom = document.getElementById('date')

while(document.body.clientHeight<window.innerHeight)
{
 dateDom.innerHTML += dateTemplate(new Date());
}
let state = 0;
window.addEventListener('scroll',function(event){
console.log(document.documentElement.scrollTop,state)
 state = document.documentElement.scrollTop
})

</script>

</html>
    実際にはdocument.documentElement.scrollTop,stateと比較して
    スクロールアップ時とスクロールダウン時の値には大きさの違いがあります.

    次はdocumentdocumentElement.scrollTop > state
    上に上がるとdocumentdocumentElement.scrollTopしたがって、コードを
    <!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>
<div id='date'>Scroll me</div>
</body>
<script>
let dateTemplate = (date)=>`<p>Date: ${date}</p>`
let dateDom = document.getElementById('date')

while(document.body.clientHeight<window.innerHeight)
{
   dateDom.innerHTML += dateTemplate(new Date());
}
let state = 0;
window.addEventListener('scroll',function(event){
  if(document.documentElement.scrollTop>state)
  {
   state = document.documentElement.scrollTop
  dateDom.insertAdjacentHTML('beforeend',dateTemplate(new Date()))
}

})

</script>

</html>
    このようにif文で条件を設定すると、タグの追加はスクロールダウン時のみ行われます.
    私たちが行ってくれたpul 8219に感謝します.
    Buttonがイベントを傍受する3つの方法
    カスタムButton直接設定selector