Pertanyaan Nonaktifkan pengguliran elastis di Safari [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

Saya hanya ingin diable efek elastis bergulir / bouncing di Safari (OSX Lion).

Saya menemukan solusi untuk mengatur overflow: hidden untuk tubuh dalam css, tetapi seperti yang diharapkan saja menonaktifkan bilah gulir, jadi jika situs web "lebih panjang" daripada layar Anda tidak akan bisa menggulir!

Setiap solusi atau petunjuk dipersilahkan! Terima kasih!


36
2017-11-16 10:32


asal


Jawaban:


Anda dapat mencapai ini secara lebih universal dengan menerapkan CSS berikut:

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

Ini memungkinkan konten Anda, apa pun itu, menjadi dapat digulir ke dalam body, tetapi ketahuilah bahwa konteks bergulir di mana scroll acara dipecat sekarang document.bodytidak window.


54
2018-05-01 22:24



Jika Anda menggunakan overflow:hidden meretas <body> elemen, untuk mendapatkan kembali perilaku gulir normal, Anda dapat memposisikan a <div> benar-benar di dalam elemen untuk mendapatkan kembali bergulir overflow:auto. Saya pikir ini adalah opsi terbaik, dan itu cukup mudah untuk menerapkan hanya menggunakan css!

Atau, Anda dapat mencoba dengan jQuery:

$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);

Sama di javasrcipt:

document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);

Opsi terakhir, periksa ipad safari: menonaktifkan pengguliran, dan efek pentalan?


14
2017-11-16 11:05



overflow:hidden;-webkit-overflow-scrolling:touch tidak akan berfungsi dengan baik pada iOS safari 8.1, karena header tetap akan keluar dari area yang terlihat.

gif

Seperti yang dikatakan @Yisela, css harus ditempatkan .container(itu <div> di bawah <body>). yang sepertinya tidak ada masalah (di leas di safari iOS 8.1)

gif

Saya telah menempatkan demo di blog saya: http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari


11
2017-07-12 16:30



Saya membuat ekstensi untuk menonaktifkannya di semua situs. Dalam melakukannya saya menggunakan tiga teknik: CSS murni, JS murni dan hibrida.

Versi CSS mirip dengan solusi di atas. Yang JS berjalan sedikit seperti ini:

var scroll = function(e) {
    // compute state
    if (stopScrollX || stopScrollY) {
        e.preventDefault();              // this one is the key
        e.stopPropagation();
        window.scroll(scrollToX, scrollToY);
    }
}

document.addEventListener('mousewheel', scroll, false);

CSS yang berfungsi ketika seseorang menggunakan posisi: elemen tetap dan biarkan browser melakukan scrolling. Yang JS diperlukan ketika beberapa JS lainnya tergantung pada jendela (misalnya peristiwa), yang akan diblokir oleh CSS sebelumnya (karena itu membuat tubuh gulir bukan jendela), dan bekerja dengan menghentikan propagasi peristiwa di tepi, tetapi kebutuhan untuk mensintesis pengguliran komponen non-tepi; Kelemahannya adalah mencegah beberapa jenis bergulir terjadi (mereka bekerja dengan CSS satu). Yang hibrida mencoba mengambil pendekatan campuran dengan melumpuhkan directional overflow (CSS) secara selektif ketika menggulir mencapai tepi (JS), dan secara teori dapat bekerja dalam kedua kasus, tetapi tidak cukup saat ini karena memiliki beberapa kelonggaran pada batas.

Jadi tergantung pada implementasi situs web seseorang, seseorang perlu mengambil satu pendekatan atau yang lain.

Lihat di sini jika ingin lebih detail: https://github.com/lloeki/unelastic


5
2018-02-27 23:09



Tidak ada solusi yang 'melimpah' yang berhasil bagi saya. Saya mengkodekan efek paralaks dengan JavaScript menggunakan jQuery. Di Chrome dan Safari di OSX, efek elastis / karet-band mengacak nomor gulir saya, karena itu sebenarnya menggulir melewati ketinggian dokumen dan memperbarui variabel jendela dengan nomor di luar batas. Apa yang harus saya lakukan adalah memeriksa apakah jumlah yang digulir lebih besar dari tinggi dokumen sebenarnya, seperti:

$(window).scroll(
    function() {
        if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
        updateScroll(); // my own function to do my parallaxing stuff
    }
);

3
2018-05-07 06:40



Anda dapat memeriksa apakah gulir-offset dalam batas. Jika mereka melampaui, atur kembali.

var scrollX = 0;
var scrollY = 0;
var scrollMinX = 0;
var scrollMinY = 0;
var scrollMaxX = document.body.scrollWidth - window.innerWidth;
var scrollMaxY = document.body.scrollHeight - window.innerHeight;

// make sure that we work with the correct dimensions
window.addEventListener('resize', function () {
  scrollMaxX = document.body.scrollWidth - window.innerWidth;
  scrollMaxY = document.body.scrollHeight - window.innerHeight;
}, false);

// where the magic happens
window.addEventListener('scroll', function () {
  scrollX = window.scrollX;
  scrollY = window.scrollY;

  if (scrollX <= scrollMinX) scrollTo(scrollMinX, window.scrollY);
  if (scrollX >= scrollMaxX) scrollTo(scrollMaxX, window.scrollY);

  if (scrollY <= scrollMinY) scrollTo(window.scrollX, scrollMinY);
  if (scrollY >= scrollMaxY) scrollTo(window.scrollX, scrollMaxY);
}, false);

http://jsfiddle.net/yckart/3YnUM/


3
2018-03-23 17:25



Tidak ada solusi di atas yang berhasil untuk saya, namun saya membungkus isi saya dalam div (# outer-wrap) dan kemudian menggunakan CSS berikut:

body {
   overflow: hidden;
}
#outer-wrap {
    -webkit-overflow-scrolling: touch;
     height: 100vh;
     overflow: auto;
}

Tentunya hanya berfungsi di browser yang mendukung lebar / tinggi viewport tentu saja.


2
2017-12-09 03:24