Good programmers web front-end learning routes Share scroll penetration method

　　Good programmers web front-end learning routes Share scroll penetration method , this article focuses on Html5 method rolling penetration, the paper sample code described in great detail, has a certain reference value of learning for all of us to learn or work, a friend in need we study together with the following learning it.

　　Website adaptation needs to be done in the mobile terminal , mobile terminal H5 and web end uses are bluma this flex Layout Solution

　　In H5 list used in the uses react-virtualized to draw a table

　　To demonstrate the specific details of a single row of data in the table, the usual solution is to use a new page or pop to complete.

　　Here is pop program data is click data before a single row is bluma of Modal-Card .

　　After clicking a single row, pop displays detail data, the entire modal-card arranged position: fixed;

　　No footer portion, provided modal-card height of the whole screen height : 100vh

　　which performed:

 

　　1 , the chrome browser displays the entire modal-card occupies the entire screen

　　2 , shown in the mobile terminal is filled, but the problem is, according to the gesture movement, the search frame portion will top up the browser, then pop the following list page data can be slid, after covering the title pop browsing You are part of the original search box, but there is a delay between data can clearly see the following page

　　3 , in the other hand - the machine will have another show, if the sliding speed is faster, the pop slippage immediately, you will see there will be a small gap at the bottom of the pop, pop following the same page It can be scrolled, and a significant delay and scroll.

　　solution:

 modal-card own solution:

JS + CSS overflow:hidden

By dynamically to pop html page to add the following class JS css

 

if ($modalButtons.length > 0) {
    $modalButtons.forEach(function ($el) {
        $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        openModal(target);
        });
    });
}

function openModal(target) {
    var $target = document.getElementById(target);
    rootEl.classList.add('is-clipped');
    $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();
}