JavaScript - 스크롤 바 조작 제어

오늘 놀 기 antd-mobile 에서 스크롤 바 문제 가 발생 했 습 니 다. Tab 구성 요소 에 여러 개 ListView 를 사용 합 니 다. 첫 번 째 Tab 구성 요 소 를 조작 할 때 ListView A 구성 요 소 를 불 러 오고 스크롤 하 며 아래쪽 에 모든 것 을 불 러 옵 니 다. 그러나 두 번 째 Tab 구성 요소 로 전환 하려 면 ListView B 구성 요소 에서 화면 을 굴 리 는 것 을 발 견 했 습 니 다.ListView B 구성 요소 의 스크롤 이 벤트 를 터치 합 니 다. 마찬가지 로 ListView A 구성 요소 에서 화면 을 스크롤 해도 ListView A 구성 요소 의 스크롤 이 벤트 를 터치 합 니 다.
이 기이 한 문 제 를 일 으 킨 원인 은 두 개 ListView 가 공용 ListView 한 body 이 었 다. 해결 방향 은 두 개 scroll 를 자신의 ListView 사건 으로 간주 하고 동시에 설정 scroll 한 body 이 었 다.overflow: hidden, css, js 의 스크롤 과 관련 된 조작 기능 이 너무 얕 은 것 을 반성 하고 이 필 기 를 특히 정리 했다.
Css 속성 오 버 플 로
내용 넘 침 표시 상태 설정

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

div 내용 넘 침 설정 시 스크롤 바 보이 기
가능 한 값
값.
묘사 하 다.
visible
기본 값.내용 은 다 듬 어 지지 않 고 요소 상자 밖으로 표 시 됩 니 다.
hidden
내용 은 다 듬 어 지고 나머지 내용 은 보이 지 않 는 다.
scroll
내용 은 다 듬 어 지지 만 브 라 우 저 는 다른 내용 을 보기 위해 스크롤 바 를 표시 합 니 다.
auto
내용 이 편집 되면 브 라 우 저 는 다른 내용 을 볼 수 있 도록 스크롤 바 를 표시 합 니 다.
inherit
부모 요소 에서 overflow 속성 을 계승 해 야 하 는 값 을 규정 합 니 다.
Js 감청 스크롤 이벤트

window.addEventListener('scroll', this.handleScroll); //       
window.removeEventListener('scroll', this.handleScroll); //       

handleScroll: function (e) {
  console.log('       ')
}

Js 획득 및 롤러 및 상단 거리 팁
브 라 우 저 별 scrollTop 차이 IE6 / 7 / 8:

doctype 성명 이 없 는 페이지 에 document. body. scrollTop 을 사용 하여 scrollTop 높이 를 가 져 올 수 있 습 니 다.

doctype 성명 이 있 는 페이지 에 대해 document. document Element. scrollTop 을 사용 할 수 있 습 니 다.Safari:

safari 는 특별 합 니 다. scrollTop 을 가 져 오 는 함수 가 있 습 니 다: window. pagey Offset;Firefox:

불 여우 등 상대 적 으로 표준 적 인 브 라 우 저 는 신경 을 많이 쓰 지 않 고 document. document Element. scrollTop 을 직접 사용 합 니 다.

html 모 르 는 사람 chrome문서 성명 (즉, 웹 페이지 의 첫 번 째 docType) 이 있 는 경우 표준 브 라 우 저 는 document.documentElement.scrollTop 만 알 고 있 지만 chrome 은 fireforx 보다 더 표준 적 이 라 고 생각 하지만 이 를 모 릅 니 다. 문서 성명 이 있 을 때 chrome 도 document. body. scrollTop 만 알 고 있 습 니 다.
서로 다른 상황 에서 document. body. scrollTop 과 document. document Element. scrollTop 은 값 을 찾 지 못 할 수 있 습 니 다.
document. body. scrollTop 과 document. documentElement. scrollTop 두 가지 특징 은 동시에 하나의 값 만 유효 하 다 는 것 이다.예 를 들 어 document. body. scrollTop 이 값 을 찾 을 수 있 을 때 document. documentElement. scrollTop 은 항상 0 입 니 다.반대로 도 마찬가지다.따라서 웹 페이지 의 진정한 scrollTop 값 을 얻 으 려 면

//    
var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;

//    
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

//    
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0;

이렇게 하면 꼭대기 에서 떨 어 진 문 제 를 해결 할 수 있다.
Js 판단 끝까지 스크롤
스크롤 바 의 끝까지 판단 하려 면 DOM 의 세 가지 속성 값, 즉 scrollTop, client Height, scrollHeight 를 사용 해 야 합 니 다.

documentElement.scrollTop 은 스크롤 바 가 Y 축 에서 굴 러 가 는 거리 이다.

scrollTop 는 내용 시각 구역 의 높이 이다.

clientHeight 는 내용 시각 영역 높이 에 넘 침 (스크롤) 거 리 를 더 한 것 이다.

이 세 가지 속성 에 대한 소 개 를 통 해 알 수 있 듯 이 스크롤 바 의 끝까지 조건 은 바로 scrollTop + client Height = = scrollHeight 이다.

//    Y       
function getScrollTop(){
　　return  scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
}
//      
function getScrollHeight(){
  return scrollHeight = document.body.scrollHeight + document.documentElement.scrollHeight;
}
//        
function getWindowHeight(){
　　return document.compatMode == "CSS1Compat" ? windowHeight = document.documentElement.clientHeight : windowHeight = document.body.clientHeight;
}
window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
　　　　alert("you are in the bottom!");
　　}
};

웃음 의 굴러가다
사용 scrollHeight 실현

$('div').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

JS 스크롤 관련 API

웹 페이지 의 보 이 는 영역 너비: document. body. clientWidth;

웹 페이지 의 보 이 는 영역 이 높 습 니 다. document. body. clientHeight;

웹 페이지 의 보 이 는 영역 너비: document. body. offsetWidth;(사 이 드 라인 의 너비 포함)

웹 페이지 의 보 이 는 영역 이 높 습 니 다: document. body. offsetHeight;(사 이 드 라인 의 너비 포함)

홈 페이지 본문 전문 너비: document. body. scrollWidth;

홈 페이지 본문 전문 높이: document. body. scrollHeight;

홈 페이지 가 말 려 있 는 높이: document. body. scrollTop;(현재 스크롤 바 거리 상단 거리)

홈 페이지 가 말 린 왼쪽: document. body. scrollLeft;(현재 스크롤 바 거리 왼쪽 거리)

홈 페이지 본문 부분: window. screenTop;

홈 페이지 본문 부분 왼쪽: window. screenLeft;

화면 해상도 가 높 음: window. screen. height;

화면 해상도 너비: window. screen. width;

화면 사용 가능 한 작업 영역 높이: window. screen. availHeight;

화면 사용 가능 한 작업 영역 너비: window. screen. availWidth;

scroll Height: 대상 의 스크롤 높이 를 가 져 옵 니 다.

scrollLeft: 대상 의 왼쪽 경계 와 창 에서 현재 볼 수 있 는 내용 의 가장 왼쪽 끝 사이 의 거 리 를 설정 하거나 가 져 옵 니 다

scrollTop: 대상 의 맨 위 와 창 에 보 이 는 내용 의 맨 위 사이 의 거 리 를 설정 하거나 가 져 옵 니 다

scrollWidth: 대상 의 스크롤 폭 가 져 오기

offset Height: 대상 이 지면 이나 부모 좌표 offset Parent 속성 에 의 해 지정 한 부모 좌표 의 높이

를 가 져 옵 니 다.

offset Left: 대상 이 지면 이나 offset Parent 속성 에 따라 지정 한 부모 좌표 의 왼쪽 위 치 를 계산 합 니 다

offsetTop: 대상 이 지면 이나 offsetTop 속성 에 따라 지정 한 부모 좌표 의 계산 상단 위치

를 가 져 옵 니 다.

event. clientX 상대 문서 의 수평 좌표

event. clientY 상대 문서 의 수직 좌표

event. offsetX 상대 용기 의 수평 좌표

event. offsetY 상대 용기 의 수직 좌표

document. documentElement. scrollTop 수직 방향 으로 굴 러 가 는 값

event. clientX + document. documentElement. scrollTop 상대 문서 의 수평 좌표 + 수직 방향 으로 굴 러 가 는 양

현재 페이지 의 스크롤 바 세로 좌표 위 치 를 가 져 오 려 면:

document.documentElement.scrollTop;

가 아니 라

document.body.scrollTop;

document Element 는 html 태그 에 대응 하고 body 는 body 태그

에 대응 합 니 다.
넓히다

JS 롤러 이벤트 (mousewheel / DOMMouse 스크롤) 이해

비교적 완전한 IE7, IE 10, Chrome, 그리고 FireFox, 마우스 아래로 스크롤 도표

설명 Jquery, DOMMouseScroll 의 차이

호 환 되 는 롤러 이벤트 방법

간단 한 실례