Background:

The website needs to be adapted in the mobile end. Bluma Flex layout solution is used for both the mobile end H5 and the Web end

On H5, we used react-virtualized tables

A common solution to displaying the details of a single row of data in a table is to create a new page or a popover.

The popover scheme is adopted here, and the data details after clicking a single line of data are modal-Card of Bluma.

For details and examples, see bulma. IO /documentati…

Question details:

After clicking a single row of data, the popup window displays the detailed data, and the entire modal-card is set to position:fixed;

If there is no footer part, set the modal-card height to the height of the entire screen: 100vh

Performance:

  1. In Chrome, the entire modal-card takes up the entire screen
  2. The display on the mobile terminal is also full, but the problem is that moving according to gestures will push the search box part of the browser to the top. At this time, the data list page under the popup window can slide, and then the title of the popup window will cover the original search box part of the browser, but there is a delay between this, and the data on the following page can be clearly seen
  3. On other phones, there will be another display. If you slide fast, you will see a small blank space at the bottom of the popover. Similarly, the page below the popover can scroll, with obvious delay and data scrolling display.

Solution:

Modal-card solution:

JS + CSS overflow:hidden

  1. Dynamically add CSS classes to the page HTML below the popover via JS
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');
}
Copy the code

  1. Disable scrolling with Overflow: Hidden
is-clipped { overflow:hidden! important }Copy the code
  1. When the popup is closed, delete the CSS class of the page with JS: IS-clipped
function closeModals() {
    rootEl.classList.remove('is-clipped');
    $modals.forEach(function ($el) {
        $el.classList.remove('is-active');
    });
}
Copy the code

However, after the test of this scheme in the application, it was found that it could not solve the problem, and the above problems still appeared

Position: fixed plan

JS + CSS Position:fixed + scrollTop

Scheme idea:

  1. When popup, set the POSITION of HTML to fixed, and cancel the POStion attribute of HTML after popup is closed.
  2. Because the list page will scroll, and the row clicked may be after the scroll has occurred, you need to calculate the scrollTop value for the HTML page itself.
  3. After setting position to Fixed during the popover, the scrollTop value of the HTML page will change to 0 and return to the top of the page. Therefore, after closing the popover, you need to manually set the scrollTop value of the HTML page to scroll to the original position of the HTML page.
  4. For compatibility, scrollTop values for different properties need to be set

Before popover:

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

Close popover:

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();
}
Copy the code