background

Products have three treasures, popover, floating layer and guide; Design has three treasures, transparent, shadow and rounded corner; Operation has three treasures, SMS, push and red envelope; Programmers have one thing that they can’t do.

The bigger the mobile market, the more diverse the needs. Today we’re talking about scroll penetration on mobile. It can be seen from the above joke that popover floating layer is quite common. What is the connection between this and rolling penetration?

Let me first explain what scroll penetration is:

The page slides up into a popover, and when we swipe the screen with our fingers, we see that the content below the popover is still scrolling. This phenomenon is called rolling penetration.

Next, LET’s talk about my process of exploring the solution to the rolling penetration problem. I hope you can get some inspiration.

demand

Need: When you click on an image, a full screen box will pop up from below to describe the details of the image.

plan

Received this demand feel no difficulty, soon raised test, and then began to hit the nuggets. Can just see the big guy’s article to see the happy time, the test is in the micro channel I. Want a bug?

Solution a:

The first method found is to add a class to overflow: Scroll: element (usually the body element) when the popover is triggered. Remove this class when exiting. For convenience, we will use the body element to refer directly to the element below the popover.

// CSS part modal_open {position: fixed; height: 100%; } / / js part document. Body. ClassList. Add ('modal_open');
document.body.classList.remove('modal_open');
Copy the code

This solution solves the roll penetration problem, but it also introduces new problems. That is:

The scrolling position of the body will be lost, so the scrollTop property of the body will be 0.

This new problem is more troublesome than scroll penetration itself, so this solution is optimized.

Scheme 2:

Since adding the modal_open class will cause the body scroll position to be lost, why not save the scroll position before losing it and set the saved scroll position back before exiting the popover? And then you start coding in that direction.

Modal_open {position: fixed; height: 100%; ** * ModalHelper helpers resolve the modal scrolling issue on mobile devices * https://github.com/twbs/bootstrap/issues/15852 */ var ModalHelper = (function(bodyClass) {
    var scrollTop;
    return {
        afterOpen: function() {
            scrollTop = document.scrollingElement.scrollTop  ||
                        document.documentElement.scrollTop || 
                        document.body.scrollTop;
            document.body.classList.add(bodyClass);
            document.body.style.top = -scrollTop + 'px';
        },
        beforeClose: function() {
            document.body.classList.remove(bodyClass);
            document.scrollingElement.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = scrollTop;
        }
    };
})('modal_open');

// method
modalSwitch: function() {let self = this;
    if( self.switchFlag === 'close' ){
        ModalHelper.afterOpen();
        self.switchFlag = 'open';
    }else{
        ModalHelper.beforeClose();
        self.switchFlag = 'close'; }}Copy the code

Plan 2 can achieve the following effects:

  1. When I scroll over, the bottom onebodyIt is fixed and cannot roll;
  2. bodyThe scroll position of the
  3. bodyScroll event;

Scheme 2 can adapt to the majority of popover requirements, and the tester did not raise other questions after the test, which is a perfect solution. But I have a question in this process:

IOS has its own rubber band effect, which will cause the page to temporarily lag.

Other schemes:

usepreventDefaultBlock browser default events:

var modal = document.getElementById('modalBox');
modal.addEventListener('touchmove'.function(e) {
    e.preventDefault();
}, false);
Copy the code

This scheme only works if the popover itself is smaller than the height of the screen, i.e., not scrollable. Touchmove is more appropriate than TouchStart. Because touchStart blocks even click events.

Using plug-ins:

My attitude toward plug-ins is that, unless they are too complicated to implement on your own, you should take the time to implement them yourself. There are two reasons:

  1. Using plug-ins means at least one more file to import.
  2. Too many plug-ins, worried about the future project upgrade and maintenance costs.

The above.

reference

  1. Developer.mozilla.org/en-US/docs/…
  2. Uedsky.com/2016-06/mob…

Front-end dictionary series

The Front End Dictionary series will continue to be updated, and in each issue I will cover a topic that comes up frequently. I would appreciate it if you could correct any inpreciseness or mistakes in the reading process. I will be delighted if I learn something from this series.

If you think my article is good, you can follow my wechat public account, which will reveal the plot in advance.

You can also add my wechat WQHHSD, welcome to exchange.

Next up

[front-end dictionary] inheritance – JavaScript must understand knowledge

portal

  1. She actually asked me today what “agency” was.