연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~39일째 자바스크립트가 요소의 위치를 확보하고 롤오버 모빌리티에 맞춘다~

10121 단어 JavaScript

개시하다


안녕하세요!@70days_js.
JavaScript로 요소의 위치를 잡고 스크롤에 맞추어 작동을 시도했습니다.
오늘이 39일째다.(2019/11/26)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


JavaScript를 사용하여 요소의 위치를 스크롤과 함께 이동합니다.↓

요소에 맞춰 굴러다니며 분산 이동하는 낙하산을 만들어 보려고 오늘 그 원리를 확인했다.
요점은position을 absolute,fixed,relative 중 하나로 만들어 원소의 현재 위치, 스크롤량을 얻는 것이다.
↓전체↓
<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="display">
        スクロール量: <span id="data1"></span><br>
        box1 Top: <span id="box1-top"></span><br>
        box2 Top: <span id="box2-top"></span> box2 Left: <span id="box2-left"></span><br>
        box3 Top: <span id="box3-top"></span>
    </div>
</body>
이번에는 요소fixed를absolute든 relative든 다 오케이.
  .box {
    position: fixed;
 }
다음은 JavaScript, 그 다음은 주제입니다.
우선 각 박스의 위치를 확보하세요.↓
// box1のY軸の最初の位置
let box1TopPosition = box1.offsetTop;

// box2のX軸Y軸の最初の位置
let box2TopPosition = box2.offsetTop;
let box2LeftPosition = box2.offsetLeft;

// box3のY軸の最初の位置
let box3TopPosition = box3.offsetTop;
박스 2만 가로로 움직여서 레프트 값도 얻었어요.
그리고 윈도우로 굴러가는 이벤트 청중을 엽니다.

window.addEventListener('scroll', function () {
    // スクロール量
    let scroll = window.pageYOffset;

    // スクロールに合わせてbox1を移動させる
    let b1Top = box1TopPosition + (scroll / 2) + 'px';
    box1.style.top = b1Top;
    // box1のY軸の現在の位置
    let box1TopPositionNow = box1.offsetTop;
    // htmlにbox1の現在の位置を描画
    data1.innerHTML = scroll;
    box1Top.innerHTML = box1TopPositionNow;


    // box2の現在の位置
    let box2TopPositionNow = box2.offsetTop;
    let box2LeftPositionNow = box2.offsetLeft;
    // スクロールに合わせてbox2を移動させる
    let b2Top = box2TopPosition + (scroll / 3) + 'px';
    let b2Left = box2LeftPosition + (scroll / 4) + 'px';
    box2.style.top = b2Top;
    box2.style.left = b2Left;

    // htmlに値を描画
    box2Top.innerHTML = box2TopPositionNow;
    box2Left.innerHTML = box2LeftPositionNow;

    // box3のY軸の現在の位置
    let box3TopPositionNow = box3.offsetTop;
    // スクロールに合わせてbox3を移動させる
    let b3Top = box3TopPosition + (scroll / 4) + 'px';
    box3.style.top = b3Top;
    // htmlに値を描画
    box3Top.innerHTML = box3TopPositionNow;
})
이렇게 스크롤하면 function이 자동으로 실행됩니다.
스크롤을 가져오는 양은 다음과 같습니다.↓
let scroll = window.pageYOffset;
박스의 이동은 이 줄입니다.↓
let b1Top = box1TopPosition + (scroll/2) + 'px';
여기서 (scroll/2)의/2부분을 바꾸면 다양한 속도에 도달할 수 있다.
이번에는 스크롤 양을 2로 나누었기 때문에 스크롤에 비해 반만 움직였다.

덤

  • 내용 y축의 위치 획득 방법
  • offsetTop·border의 위치에서(margin 무시)

  • 컨텐츠 높이 획득 방법
  • client Height...padding
    • 포함
  • offsetHeight...border
    • 포함

  • 스크롤 Y축 획득 방법
  • window.pageYOffset
  • document.documentElement.scrollTop

    • 감상


    조사할 때 브라우저의 호환성이 좋아진 것을 발견하고 웹 업계의 어둠을 보았는데 되돌아갈 대상이 있다면.
    통일하면 좋을 것 같은데 그쪽에 어른 일이 있나요?
    그럼에도 불구하고 오늘 굴러가는 요소의 움직임에 대한 수수께끼를 풀 수 있어서 다행이다.브라우저를 만드는 사람을 위해 사용하기 편리한 속성과 방법을 준비했기 때문이다.
    끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

    참고 자료

  • JavaScript를 통해 스크롤 양을 얻는 방법https://lab.syncer.jp/Web/JavaScript/Snippet/1/
    • 매우 알기 쉽다.감사합니다!
    Tableau의 LOD식: FIXED, INCLUDE, EXCLUDE 사용 방법
    로컬 Mac에서 여러 MySQL 데이터베이스 서버 생성

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage