Prevent “overscrolling” of web page

前端 未结 8 2367
星月不相逢
星月不相逢 2020-11-28 01:23

In Chrome for Mac, one can \"overscroll\" a page (for lack of a better word), as shown in the screenshot below, to see \"what\'s behind\", similar to the iPad or iPhone.

相关标签:
8条回答
  • 2020-11-28 01:55

    You can use this code to remove touchmove predefined action:

    document.body.addEventListener('touchmove', function(event) {
      console.log(event.source);
      //if (event.source == document.body)
        event.preventDefault();
    }, false);
    
    0 讨论(0)
  • 2020-11-28 01:59
    html,body {
        width: 100%;
        height: 100%;
    }
    body {
        position: fixed;
        overflow: hidden;
    }
    
    0 讨论(0)
  • 2020-11-28 02:00

    One way you can prevent this, is using the following CSS:

    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    body > div {
        height: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
    

    This way the body has never any overflow and won't "bounce" when scrolling at the top and bottom of the page. The container will perfectly scroll its content within. This works in Safari and in Chrome.

    Edit

    Why the extra <div>-element as a wrapper could be useful:
    Florian Feldhaus' solution uses slightly less code and works fine too. However, it can have a little quirk, when it comes to content that exceeds the viewport width. In this case the scrollbar at the bottom of the window is moved out of the viewport half way and is hard to recognize/reach. This can be avoided using body { margin: 0; } if suitable. In situation where you can't add this CSS the wrapper element is useful as the scrollbar is always fully visible.

    Find a screenshot below: enter image description here

    0 讨论(0)
  • 2020-11-28 02:04

    Bounce effect cannot be disabled except the height of webpage equals to window.innerHeight, you can let your sub-elements scroll.

    html {
        overflow: hidden;
    }
    
    0 讨论(0)
  • 2020-11-28 02:08

    Try this way

    body {
        height: 100vh;
        background-size: cover;
        overflow: hidden;
    }
    
    0 讨论(0)
  • 2020-11-28 02:11

    The accepted solution was not working for me. The only way I got it working while still being able to scroll is:

    html {
        overflow: hidden;
        height: 100%;
    }
    
    body {
        height: 100%;
        overflow: auto;
    }
    
    0 讨论(0)
提交回复
热议问题