좋은 프로그래머 웹 프런트 엔드 학습 경로를 공유 스크롤 침투 방법

　　좋은 프로그래머 웹 프런트 엔드 학습 경로를 공유 스크롤 침투 방법은 , 이 문서가에 초점을 맞추고 에서 HTML5 방법 롤링 침투, 훌륭한 세부 사항에 설명 된 종이 샘플 코드는, 필요로하는 친구를 배우거나 작업하는 우리 모두를위한 학습의 특정 참조 값이 우리는 다음이 학습과 함께 공부합니다.

　　웹 사이트 적응은 휴대 단말기에서 수행 할 필요가 , 모바일 단말 H5 및 웹 최종 용도가있다 bluma 이 플렉스 레이아웃 솔루션

　　에서 H5의 용도에 사용 목록 - 가상화 반응 테이블을 그릴

　　테이블의 한 행의 데이터의 특정 세부 사항을 설명하기 위해, 일반적인 솔루션은 새 페이지를 사용하거나 완료하기 위해 팝업하는 것입니다.

　　여기에 팝업 프로그램 데이터가 단일 행되기 전에 데이터를 클릭입니다 bluma 의 모달 카드가 .

　　단일 행을 클릭하면, 팝업 상세 데이터를 표시하여 전체 모달 카드가 배치 된 위치 : 고정;

　　없음 바닥 글 부분을 제공하지 모달 카드 전체 화면 높이의 높이 : 100vh를

　　성능 :

 

　　1 , 크롬 브라우저는 전체 표시 모달 카드가 전체 화면을 차지

　　(2) , 이동 단말에 도시가 충전되어 있지만, 제스처 이동에 따라, 탐색 프레임 부 브라우저를 맨 것이다 문제는 다음 목록 페이지 데이터 표기 팝 브라우징을 피복 한 후에, 슬라이딩 가능 팝업 원래 검색 상자의 일부이지만, 분명 다음 페이지를 볼 수있는 데이터 사이에 지연이있다

　　3 , 다른 손에 - 슬라이딩 속도가 빠른 경우 기계가 다른 쇼를 할 것이다, 팝 미끄럼 즉시, 당신은 같은 페이지 다음 팝업, 팝의 하단에 작은 차이가있을 것입니다 볼 수 있습니다 그것은 스크롤하고, 상당한 지연 및 스크롤 할 수 있습니다.

　　해결 방법 :

 모달 카드 자체 솔루션 :

JS + CSS 오버 플로우 : 숨겨진

에 의해 동적으로 다음과 같은 클래스 JS의 CSS를 추가 할 수있는 HTML 페이지를 팝업합니다

 

1 이 삼 4 5 6 (7) 8 9 (10) (11) (12) (13) (14)

경우 ($ modalButtons.length> 0) {     $ modalButtons.forEach (기능 ($ 엘) {         $ el.addEventListener (기능 '을 클릭'() {         VAR 대상 = $ el.dataset.target;         openModal (표적);         });     }); }   openModal 함수 (목표) {     var에 $ 대상 = document.getElementById를 (대상);     rootEl.classList.add는 ( "IS-클립핑 ');     $target.classList.add('is-active'); }

 

通过 overflow:hidden 来禁止页面的滚动

is-clipped {
    overflow:hidden!important
}

当弹窗关闭时，通过JS删除掉页面的 css 类：is-clipped

function closeModals() {
    rootEl.classList.remove('is-clipped');
    $modals.forEach(function ($el) {
        $el.classList.remove('is-active');
    });
}

 

但是这种方案在应用中测试过后，发现并不能解决问题，上面的问题还是出现

position:fixed 方案

JS + CSS Position:fixed + scrollTop

方案思路：

1. 弹窗时，将html的position 设置为 fixed，将弹窗关闭后，将html的postion 属性取消。

2. 因为列表页会出现滚动的情况，而点击的行有可能是在滚动发生后，所以需要计算html页面本身的scrollTop 值。

3. 因为弹窗时设置position为fixed后，html页面的 scrollTop 值会变成0，会回到页面顶部，所以在关闭弹窗后，需要手动设置html页面的scrollTop 值，让其滚动到html页面原来的位置。

4. 对于兼容性，需要设置不同属性的 scrollTop 值

弹窗之前：

const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;
global.document.documentElement.style.position = 'fixed';
this.scrollTop = scrollTop;

 

关闭弹窗：

closeModalHandler = () => {
    const { closeOrderHistoryModal } = this.props;
    global.document.documentElement.style.position = '';
    global.pageYOffset = this.scrollTop;
    global.document.documentElement.scrollTop = this.scrollTop;
    global.document.body.scrollTop = this.scrollTop;
    closeOrderHistoryModal();
}