23_10_27 JS공부정리

[코딩애플] 중급모듈

 

-window.scrollBy(x,y) : 현재위치만큼 x축 스크롤을 x만큼, y축 스크롤을 y만큼 움직이는 명령어

    window.addEventListener('scroll',function() {

        window.scrollBy(0,100) //현재위치에서 스크롤을 100만큼 움직여주세요

    })

 

-제이쿼리 버전

    window.addEventListener('scroll',function() {

        console.log(window.scrollY)

    })

    $(window).on('scroll', function() {

        console.log($(window).scrollTop())

    }) // 위 코드와 동일

 

-scrollTop(제이쿼리)은 scrollTo와 scrollY의 기능을 동시에 가지고있음.

    window.addEventListener('scroll',function() {

        window.scrollTo(0,100)

    })

    $(window).on('scroll', function() {

        $(window).scrollTop(100)

    })

 

-scrollTop(자바스크립트) :  window가 아닌 box의 scrollY값을 반환함.

-scrollHeight  : overflow된 div박스의 실제 높이

-clientHeight : 눈에보이는 박스의 높이

*div박스 스크롤 내린 양 + div박스 높이 = div박스 실제높이

let divscroll = document.querySelector('.lorem').scrollTop;  //div박스의 scrollY

let divRealHeight = document.querySelector('.lorem').scrollHeight; //div박스의 실제높이

 let divVeiwHeight = document.querySelector('.lorem').clientHeight; //눈에보이는 div 박스의 높이

        if(divscroll+divVeiwHeight >= divRealHeight) {

            alert('다읽음');

        }

-스크롤을 내리면 nav바의 로고폰트가 작아지는 코드

    window.addEventListener('scroll',function() {

        const navFontSize = document.querySelector('.navbar-brand')

        if(window.scrollY>=100) {

            navFontSize.style.fontSize = '20px';

        } else if(window.scrollY < 100) {

            navFontSize.style.fontSize = '50px';

        }

    })

 

.navbar-brand {

    font-size: 50px;

    transition : all 0.3s; //애니메이션으로 자연스럽게가능

}

 -div박스 안에서 스크롤을 다 내렸을때 alert를 띄우는 코드

    let flag = false; // flag변수를 이용해서 alert가 중복되서 띄워지지 않게 방지

    document.querySelector('.lorem').addEventListener('scroll', function() {

        if(flag) return;

        let divscroll = document.querySelector('.lorem').scrollTop;

        let divRealHeight = document.querySelector('.lorem').scrollHeight;

        let divVeiwHeight = document.querySelector('.lorem').clientHeight;

        if(divscroll+divVeiwHeight >= divRealHeight-5) {

            alert('다읽음');

            flag = true

            setTimeout(function() {

                flag = false;

            },500)

        }

    })

 -페이지 끝에 다다랐을때 감지하는 코드

    window.addEventListener('scroll',function() {

        let sh = document.querySelector('html').scrollHeight // 총높이(실제html박스높이)

        //sh = ch + max st

        let ch = document.querySelector('html').clientHeight // 브라우저 크기(뷰포트높이)

        let st = document.querySelector('html').scrollTop // 스크롤위치(스크롤맨위부터 스크롤막대바로위까지)

        if(ch + st >= sh) {

            alert('끝')

        }

    })

*document.documentElement = document.querySelector('html')

 

-스크롤 위치에 따라 진행상황을 알려주는 UI

//html 

<div class="graybox">

    <div class="blackbox"></div>

</div>

//js

    window.addEventListener('scroll',function() {

        let sh = document.querySelector('html').scrollHeight // 총높이(실제html박스높이)

        let ch = document.querySelector('html').clientHeight // 브라우저 크기(뷰포트높이)

        let st = document.querySelector('html').scrollTop // 스크롤위치(스크롤맨위부터 스크롤막대바로위까지)

        let blackBox = document.querySelector('.blackbox')

        blackBox.style.width = `${st/(sh-ch)*100}%`

        console.log(blackBox)

        if(ch + st >= sh) {

            alert('끝')

        }

    })

 

//scss

 

.graybox {

    width : 100%;

    height : 10px;

    background-color: #eee;

    .blackbox {

        width : 0%;

        height : 10px;

        background-color: black;

    }

}

*무한스크롤 구현도 이걸로 가능할듯.