Disabling android's chrome pull-down-to-refresh feature

前端 未结 15 2507
予麋鹿
予麋鹿 2020-12-02 04:20

I\'ve created a small HTML5 web application for my company.

This application displays a list of items and everything works fine.

The application is mainly us

相关标签:
15条回答
  • 2020-12-02 04:51

    I solved the pull-down-to-refresh problem with this:

    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    0 讨论(0)
  • 2020-12-02 04:58

    Simple Javascript

    I implemented using standard javascript. Simple and easy to implement. Just paste and it works fine.

    <script type="text/javascript">         //<![CDATA[
         window.addEventListener('load', function() {
              var maybePreventPullToRefresh = false;
              var lastTouchY = 0;
              var touchstartHandler = function(e) {
                if (e.touches.length != 1) return;
                lastTouchY = e.touches[0].clientY;
                // Pull-to-refresh will only trigger if the scroll begins when the
                // document's Y offset is zero.
                maybePreventPullToRefresh =
                    window.pageYOffset == 0;
              }
    
              var touchmoveHandler = function(e) {
                var touchY = e.touches[0].clientY;
                var touchYDelta = touchY - lastTouchY;
                lastTouchY = touchY;
    
                if (maybePreventPullToRefresh) {
                  // To suppress pull-to-refresh it is sufficient to preventDefault the
                  // first overscrolling touchmove.
                  maybePreventPullToRefresh = false;
                  if (touchYDelta > 0) {
                    e.preventDefault();
                    return;
                  }
                }
              }
    
              document.addEventListener('touchstart', touchstartHandler, false);
              document.addEventListener('touchmove', touchmoveHandler, false);      });
                //]]>    </script>
    
    0 讨论(0)
  • 2020-12-02 04:58

    The best solution on pure CSS:

    body {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: -1px;
        z-index: 1;
        margin: 0;
        padding: 0;
        overflow-y: hidden;
    }
    #pseudobody {
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        z-index: 2;
        margin: 0;
        padding:0;
        overflow-y: auto;
    }
    

    See this demo: https://jsbin.com/pokusideha/quiet

    0 讨论(0)
提交回复
热议问题