Html5 scroll penetration method

The website needs to be adapted on the mobile side. For mobile H5 and web sides, flex layout solutions such as bluma are used.

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

In order to display the specific details of a single row of data in the table, the usual solution is to use a new page or a pop-up window.

The pop-up window solution is used here. The data details after clicking on a single row of data use bluma's modal-card.

For specific details and examples, please refer to: https://bulma.io/documentation/components/modal/

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

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

Performance:

• When displayed in the Chrome browser, the entire modal-card takes up the entire screen.
• The display on the mobile phone is also full, but the problem is that if you move according to the gesture, the search box part of the browser will be pushed up. At this time, the data list page under the pop-up window can be slid, and then the title of the pop-up window will cover the original browser Search box part, but there is a delay between this, you can clearly see the data on the page below
• There will be another display on other mobile phones. If the sliding speed is relatively fast and you slide immediately after the pop-up window appears, you will see a small blank space at the bottom of the pop-up window. Similarly, the page below the pop-up window can be scrolled. And there is obvious delay and data scrolling display.

Solution:

JS + CSS overflow:hidden

Dynamically add css classes to the page html under the pop-up window through 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');}

 is-clipped { overflow:hidden!important}

When the pop-up window is closed, delete the css class of the page through JS: is-clipped

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

However, after testing this solution in the application, it was found that it did not solve the problem, and the above problems still occurred.

JS + CSS Position:fixed + scrollTop

Plan ideas:

1. When the pop-up window pops up, set the position of the html to fixed. After closing the pop-up window, cancel the postion attribute of the html.
2. Because the list page will scroll, and the clicked row may occur after the scrolling occurs, the scrollTop value of the html page itself needs to be calculated.
3. Because after setting the position to fixed when the pop-up window occurs, the scrollTop value of the html page will become 0 and return to the top of the page. Therefore, after closing the pop-up window, you need to manually set the scrollTop value of the html page to allow it to scroll to the original position of the html page. Location.
4. For compatibility, you need to set the scrollTop value of different properties

Before the pop-up window:

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

Close the pop-up window:

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.