Ngăn việc di chuyển trên điện thoại thông minh với kích thước màn hình cụ thể

Question

Tôi chỉ cần tránh di chuyển trên thiết bị di động bằng JS và/hoặc JQuery khi xảy ra một sự kiện nhất định. Tôi có một hình, khi người dùng mở hình, cuộn sẽ bị vô hiệu hóa, khi nó được đóng lại, việc cuộn sẽ được bật lại. thiết bị mục tiêu là:

• bất kỳ IPhone 4s từ lên đến mới nhất một (5 + 6 bao gồm)

Dưới đây là một số trong những điều mà tôi đã cố gắng nhưng đã không làm việc ra:

Method1:

    document.addEventListener('touchstart', this.touchstart); 
        document.addEventListener('touchmove', this.touchmove); 

        function touchstart(e) { 
         e.preventDefault() 
        } 

        function touchmove(e) { 
         e.preventDefault() 
        } 

Cách 2:

// left: 37, up: 38, right: 39, down: 40, 
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 
var keys = {37: 1, 38: 1, 39: 1, 40: 1}; 

function preventDefault(e) { 
    e = e || window.event; 
    if (e.preventDefault) 
     e.preventDefault(); 
    e.returnValue = false; 
} 

function preventDefaultForScrollKeys(e) { 
    if (keys[e.keyCode]) { 
     preventDefault(e); 
     return false; 
    } 
} 

function disableScroll() { 
    if (window.addEventListener) // older FF 
     window.addEventListener('DOMMouseScroll', preventDefault, false); 
    window.onwheel = preventDefault; // modern standard 
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 
    window.ontouchmove = preventDefault; // mobile 
    document.onkeydown = preventDefaultForScrollKeys; 
} 

function enableScroll() { 
    if (window.removeEventListener) 
     window.removeEventListener('DOMMouseScroll', preventDefault, false); 
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null; 
    document.onkeydown = null; 
} 

Có đề xuất nào khác không?

Answer 1

tôi cố định này bằng cách thêm position: fixed; để .no-scroll đó được áp dụng cho html và body khi con số được trả về.

Thêm vào JS để vô hiệu hóa di chuyển trên con số mở:

$('html, body').toggleClass('no-scroll'); 

Thêm vào JS để cho phép di chuyển trên con số gần:

$('html, body').removeClass('no-scroll'); 

CSS:

.no-scroll { 
    position: fixed; 
} 

Hy vọng rằng điều này sẽ giúp những người khác có vấn đề tương tự.

Answer 2

Bạn có thể dễ dàng vô hiệu hóa cuộn tài liệu với css:

$('body').addClass('overflow'); // use to disable scroll 
//- 
$('body').removeClass('overflow'); // use to enable scroll 

Và css: (hoặc sử dụng jQuery .css())

<style> 
    .overflow { 
     overflow: hidden; 
    } 
</style> 

Answer 3

tôi sử dụng sth như thế:

$.fn.isolatedScroll = -> 
    @on 'mousewheel DOMMouseScroll', (e) -> 
     delta = e.wheelDelta or e.originalEvent and e.originalEvent.wheelDelta or -e.detail 
     bottomOverflow = @scrollTop + $(@).outerHeight() - (@scrollHeight) >= 0 
     topOverflow = @scrollTop <= 0 
     if delta < 0 and bottomOverflow or delta > 0 and topOverflow then e.preventDefault() 

Và tôi sử dụng nó tức. $(@).find('ul').isolatedScroll()

Answer 4

Disable scrolling in all mobile devices

Vui lòng kiểm tra answer ngay dưới câu trả lời chấp nhận.