Tôi đã tạo một ứng dụng web HTML5 nhỏ cho công ty của mình.

Ứng dụng này hiển thị một danh sách các mục và mọi thứ hoạt động tốt.

Ứng dụng này chủ yếu được sử dụng trên điện thoại Android và Chrome làm trình duyệt. Ngoài ra, trang web được lưu trên màn hình chính để Android quản lý toàn bộ nội dung dưới dạng một ứng dụng ( tôi đoán là sử dụng WebView ).

Chrome Beta (và tôi cũng nghĩ là Android System WebView) đã giới thiệu tính năng "kéo xuống để làm mới" ( ví dụ: xem liên kết này ).

Đây là một tính năng tiện dụng nhưng tôi đã tự hỏi liệu nó có thể bị vô hiệu hóa với một số thẻ meta (hoặc nội dung javascript) bởi vì người dùng có thể dễ dàng kích hoạt làm mới trong khi điều hướng danh sách và toàn bộ ứng dụng được tải lại.

Ngoài ra đây là một tính năng không cần thiết cho ứng dụng.

Tôi biết rằng tính năng này vẫn chỉ khả dụng trong Chrome beta, nhưng tôi có cảm giác rằng đây cũng là ứng dụng ổn định.

Cảm ơn bạn!

Chỉnh sửa: Tôi đã gỡ cài đặt Chrome Beta và liên kết được ghim vào màn hình chính hiện mở với Chrome ổn định. Vì vậy, các liên kết được ghim bắt đầu với Chrome chứ không phải với webview.

Chỉnh sửa: hôm nay (2015-03-19), kéo xuống để làm mới đã ổn định.

Chỉnh sửa: từ câu trả lời @Evyn Tôi theo liên kết này và nhận được mã javascript / jquery này hoạt động.

var lastTouchY = 0;
var preventPullToRefresh = false;

$('body').on('touchstart', function (e) {
    if (e.originalEvent.touches.length != 1) { return; }
    lastTouchY = e.originalEvent.touches[0].clientY;
    preventPullToRefresh = window.pageYOffset == 0;
});

$('body').on('touchmove', function (e) {
    var touchY = e.originalEvent.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
    if (preventPullToRefresh) {
        // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
        preventPullToRefresh = false;
        if (touchYDelta > 0) {
            e.preventDefault();
            return;
        }
    }
});

Như @bcintegrity đã chỉ ra, tôi hy vọng về một giải pháp bảng kê khai trang web (và / hoặc thẻ meta) trong tương lai.

Hơn nữa, đề xuất cho các mã ở trên được chào đón.

Hành động mặc định của hiệu ứng kéo để làm mới có thể được ngăn chặn một cách hiệu quả bằng cách thực hiện bất kỳ thao tác nào sau đây:

1. preventDefault'trong một số phần của chuỗi cảm ứng, bao gồm bất kỳ phần nào sau đây (theo thứ tự từ đột phá nhất đến ít gây rối nhất):
   • a. Toàn bộ luồng cảm ứng (không lý tưởng).
   • b. Tất cả các cảm ứng overscrolling hàng đầu.
   • c. Các touchmove ghi đè đầu tiên đầu tiên.
   • d. Touchmove ghi đè đầu tiên đầu tiên chỉ khi 1) lần chạm đầu tiên xảy ra khi độ lệch cuộn y bằng 0 và 2) touchmove sẽ tạo ra overscroll.
2. Áp dụng touch-action: noneđịnh hướng dữ liệu cho các yếu tố nhắm mục tiêu cảm ứng, khi thích hợp, vô hiệu hóa các hành động mặc định (bao gồm kéo để làm mới) của chuỗi cảm ứng.
3. Áp dụng overflow-y: hiddenthành phần trên nền tảng cơ thể, sử dụng div cho nội dung có thể cuộn nếu cần.
4. Vô hiệu hóa hiệu ứng cục bộ thông qua chrome://flags/#disable-pull-to-refresh-effect).

Xem thêm

Giải pháp đơn giản cho năm 2019+

Chrome 63 đã thêm một thuộc tính css để trợ giúp chính xác điều này. Hãy đọc qua hướng dẫn này của Google để có ý tưởng hay về cách bạn có thể xử lý nó.

Đây là TL của họ: DR

Thuộc tính hành vi ghi đè CSS cho phép nhà phát triển ghi đè hành vi cuộn tràn mặc định của trình duyệt khi đạt đến đỉnh / cuối nội dung. Các trường hợp sử dụng bao gồm vô hiệu hóa tính năng kéo để làm mới trên thiết bị di động, loại bỏ các hiệu ứng phát sáng và dải cao su quá mức và ngăn nội dung trang cuộn khi nó ở dưới chế độ / lớp phủ.

Để làm cho nó hoạt động, tất cả những gì bạn phải thêm là điều này trong CSS của bạn:

body {
  overscroll-behavior: contain;
}

Hiện tại, nó cũng chỉ được Chrome, Edge và Firefox hỗ trợ nhưng tôi chắc chắn Safari sẽ bổ sung ngay vì chúng dường như hoàn toàn sẵn sàng với các nhân viên dịch vụ và tương lai của PWA.

Hiện tại, bạn chỉ có thể tắt tính năng này qua chrome: // flags / # vô hiệu hóa-kéo-để-làm mới hiệu ứng - mở trực tiếp từ thiết bị của bạn.

Bạn có thể cố gắng nắm bắt touchmovecác sự kiện, nhưng cơ hội rất mong manh để đạt được kết quả chấp nhận được.

Tôi sử dụng MooTools và tôi đã tạo một Class để vô hiệu hóa làm mới trên một phần tử được nhắm mục tiêu, nhưng mấu chốt của nó là (JS gốc):

var target = window; // this can be any scrollable element
var last_y = 0;
target.addEventListener('touchmove', function(e){
    var scrolly = target.pageYOffset || target.scrollTop || 0;
    var direction = e.changedTouches[0].pageY > last_y ? 1 : -1;
    if(direction>0 && scrolly===0){
        e.preventDefault();
    }
    last_y = e.changedTouches[0].pageY;
});

Tất cả những gì chúng ta làm ở đây là tìm hướng y của touchmove và nếu chúng ta đang di chuyển xuống màn hình và cuộn mục tiêu là 0, chúng ta sẽ dừng sự kiện. Như vậy, không làm mới.

Điều này có nghĩa là chúng tôi đang bắn vào mọi 'động thái', có thể tốn kém, nhưng là giải pháp tốt nhất tôi tìm thấy cho đến nay ...

Sau nhiều giờ cố gắng, giải pháp này hiệu quả với tôi

$("html").css({
    "touch-action": "pan-down"
});

AngularJS

Tôi đã vô hiệu hóa thành công với chỉ thị AngularJS này:

//Prevents "pull to reload" behaviour in Chrome. Assign to child scrollable elements.
angular.module('hereApp.directive').directive('noPullToReload', function() {
    'use strict';

    return {
        link: function(scope, element) {
            var initialY = null,
                previousY = null,
                bindScrollEvent = function(e){
                    previousY = initialY = e.touches[0].clientY;

                    // Pull to reload won't be activated if the element is not initially at scrollTop === 0
                    if(element[0].scrollTop <= 0){
                        element.on("touchmove", blockScroll);
                    }
                },
                blockScroll = function(e){
                    if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
                        e.preventDefault();
                    }
                    else if(initialY >= e.touches[0].clientY){ //Scrolling down
                        //As soon as you scroll down, there is no risk of pulling to reload
                        element.off("touchmove", blockScroll);
                    }
                    previousY = e.touches[0].clientY;
                },
                unbindScrollEvent = function(e){
                    element.off("touchmove", blockScroll);
                };
            element.on("touchstart", bindScrollEvent);
            element.on("touchend", unbindScrollEvent);
        }
    };
});

Sẽ an toàn khi dừng xem ngay khi người dùng cuộn xuống, vì thao tác kéo để làm mới không có cơ hội được kích hoạt.

Tương tự như vậy, nếu scrolltop > 0, sự kiện sẽ không được kích hoạt. Trong triển khai của tôi, tôi liên kết sự kiện touchmove trên touchstart, chỉ khi scrollTop <= 0. Tôi hủy liên kết nó ngay khi người dùng cuộn xuống ( initialY >= e.touches[0].clientY). Nếu người dùng cuộn lên ( previousY < e.touches[0].clientY), thì tôi gọi preventDefault().

Điều này giúp chúng tôi không phải xem các sự kiện cuộn một cách không cần thiết, nhưng vẫn chặn quá mức.

jQuery

Nếu bạn đang sử dụng jQuery, đây là tương đương chưa được kiểm tra . elementlà một phần tử jQuery:

var initialY = null,
    previousY = null,
    bindScrollEvent = function(e){
        previousY = initialY = e.touches[0].clientY;

        // Pull to reload won't be activated if the element is not initially at scrollTop === 0
        if(element[0].scrollTop <= 0){
            element.on("touchmove", blockScroll);
        }
    },
    blockScroll = function(e){
        if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
            e.preventDefault();
        }
        else if(initialY >= e.touches[0].clientY){ //Scrolling down
            //As soon as you scroll down, there is no risk of pulling to reload
            element.off("touchmove");
        }
        previousY = e.touches[0].clientY;
    },
    unbindScrollEvent = function(e){
        element.off("touchmove");
    };
element.on("touchstart", bindScrollEvent);
element.on("touchend", unbindScrollEvent);

Đương nhiên, điều tương tự cũng có thể đạt được với JS thuần túy.

Javascript đơn giản

Tôi đã thực hiện bằng cách sử dụng javascript tiêu chuẩn. Đơn giản và dễ thực hiện. Chỉ cần dán và nó hoạt động tốt.

<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>

Giải pháp tốt nhất về CSS thuần túy:

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

Xem bản demo này: https://jsbin.com/pokusideha/quiet

Bạn có thể thử cái này

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

thí dụ :

https://ebidel.github.io/demos/chatbox.html

tài liệu đầy đủ https://developers.google.com/web/updates/2017/11/overscroll-behavior

Tôi thấy thiết lập CSS tràn cơ thể của bạn : ẩn là cách đơn giản nhất. Nếu bạn muốn có một trang ứng dụng cuộn, bạn chỉ có thể sử dụng thùng chứa div với các tính năng cuộn.

Lưu ý rằng overflow-y không được kế thừa, vì vậy bạn cần đặt nó trên TẤT CẢ các phần tử khối.

Bạn có thể làm điều này với jQuery chỉ bằng cách:

        $(document.body).css('overflow-y', 'hidden'); 
        $('*').filter(function(index) {
            return $(this).css('display') == 'block';
        }).css('overflow-y', 'hidden');

Kể từ một vài tuần, tôi phát hiện ra rằng chức năng javascript mà tôi đã sử dụng để vô hiệu hóa hành động làm mới Chrome sẽ không hoạt động nữa. Tôi đã làm điều này để giải quyết nó:

$(window).scroll(function() {
   if ($(document).scrollTop() >= 1) {
      $("html").css({
         "touch-action": "auto"}
      );
   } else {
      $("html").css({
         "touch-action": "pan-down"
      });
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Dung dịch js nguyên chất.

// Prevent pull refresh chrome
    var lastTouchY = 0;
    var preventPullToRefresh = false;
    window.document.body.addEventListener("touchstart", function(e){
        if (e.touches.length != 1) { return; }
        lastTouchY = e.touches[0].clientY;
        preventPullToRefresh = window.pageYOffset == 0;
    }, false);

    window.document.body.addEventListener("touchmove", function(e){

        var touchY = e.touches[0].clientY;
        var touchYDelta = touchY - lastTouchY;
        lastTouchY = touchY;
        if (preventPullToRefresh) {
            // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
            preventPullToRefresh = false;
            if (touchYDelta > 0) {
                e.preventDefault();
                return;
            }
        }

    }, false);

Những gì tôi đã làm là thêm sau touchstartvà touchend/ touchcancelsự kiện:

scrollTo(0, 1)

Vì chrome không cuộn nếu nó không ở vị trí cuộn, 0điều này sẽ ngăn chrome thực hiện thao tác kéo để làm mới.

Nếu nó vẫn không hoạt động, hãy thử làm điều đó khi tải trang.

Tôi đã giải quyết vấn đề kéo xuống để làm mới bằng cách này:

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}