Bir web sayfasının geçici olarak kaydırılması nasıl kilitlenir?

Question

Bir iletişim kutusu görüntülendiğinde bir web sayfasının kaydırmasını nasıl geçici olarak kilitleyebilirim? İçinde, overlayed web sayfasından kaydırmayı devre dışı bıraktıktan sonra 'u kaydırmayı etkinleştirmek istediğim bir iletişim kutusu var.

geçici olarak için bir js komutu var mıdır?

Answer 1

Tarayıcı penceresinin genişliği ve yüksekliği ile bir kapsayıcı öğesi veya belki de overflow: hidden ürününü ayarlayabilirsiniz. Bu sayede herhangi bir taşan içerik sayfadan düşecek ve kaydırma çubukları hiçbir zaman gösterilmeyecektir. Bu, body.dialog-open { overflow: hidden; } gibi bir css ifadesinde ayarlanabilir. Daha sonra, iletişim kutusu açılıp kapatıldığında .dialog-open sınıf adını ekleyebilir ve kaldırabilirsiniz.

Vücutta bunu ayarlarsanız genişlik ve yükseklik gerekli olmayabilir, ancak tarayıcı uyumluluğunu kontrol etmek zorundayım. Orada beklenmedik sonuçlar elde edebilirsin.

düzenleme: İletişim kutusunun içinde kaydırma yapmak isterseniz, o öğe üzerinde bir yükseklik ayarlanmış olarak overflow: auto'u burada ayarlayabilirsiniz.

Daha eski tarayıcılarda (özellikle IE'de) yatay kaydırma çubuğu da gösterilebilir, bu durumda overflow-x: hidden değerini ayarlamanız gerekebilir.

Ayrıca bkz: kaydırma çubukları hakkında daha fazla bilgi için CSS div element - how to show horizontal scroll bars only?.

Answer 2

DÜZENLEME bu deneyin: (kaydırma çubuğunu kaldırmak ve kaydırma engel olacak) açık iletişim kutusunda

:

$('body').css({'overflow':'hidden'}); 
    $(document).bind('scroll',function() { 
     window.scrollTo(0,0); 
    }); 

Diyalog Close Açık (izin kullanıcı yeniden kaydırmak için):

$(document).unbind('scroll'); 
    $('body').css({'overflow':'visible'});