Cegah jquery gulir jendela

Saya sedang mengembangkan pengganti menu pilih di jquery.
Pertama saya harus membuat menu pilih baru dapat difokus hanya dengan menambahkan tabindex="0" ke wadah.
Lalu, saya menonaktifkan fokus pada menu pilih asli dan memberikan fokus ke yang baru. Ketika yang baru terfokus dan Anda menekan panah atas dan bawah, opsinya berubah, tetapi ada masalah besar. Saat Anda menekan panah, badannya juga ikut bergerak.
Sejauh ini saya sudah mencoba semua solusi ini namun tidak berhasil:

$(window).unbind('scroll');
$(document).unbind('scroll');
$('body').unbind('scroll');
$(window).unbind('keydown');
$(document).unbind('keydown');

Periksa kodenya di sini http://pastebin.com/pVNMqyui Kode ini dari versi pengembangan Ideal Forms http://code.google.com/p/idealforms yang akan segera saya rilis , dengan dukungan keyboard.

Adakah ide mengapa ini tidak berhasil?

EDIT: Terpecahkan!

Temukan jawabannya di postingan ini tag tautan jquery aktifkan nonaktifkan

var disableScroll = function(e){
    if (e.keyCode === 40 || e.keyCode === 38) {
        e.preventDefault();
        return false;
    }
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }

Berhasil!


javascript scroll jquery
person elclanrs    schedule 13.12.2011    source sumber
comment
mungkin ini adalah pekerjaan untuk event.preventDefault(); di handler untuk kejadian apa pun yang mungkin menyebabkan jendela bergulir...   -  person Aaron    schedule 13.12.2011
comment
Anda harus menambahkan ini sebagai jawaban atas pertanyaan Anda sendiri.   -  person Merlyn Morgan-Graham    schedule 13.12.2011

Jawaban (5)


arrow_upward
2
arrow_downward

Di pengendali keydown Anda, untuk kunci atas dan bawah, kembalikan false seperti ini:

'keydown' : function (e) {
    if (e.keyCode === 40) { // Down arrow
        that.events.moveOne('down');
    }
    if (e.keyCode === 38) { // Up arrow
        that.events.moveOne('up');
    }
    return false;
}

Selain itu, pastikan pengembalian ini disebarkan ke onkeydown asli browser bergantung pada cara/kerangka mana yang Anda gunakan.

person techfoobar    schedule 13.12.2011

arrow_upward
0
arrow_downward

Temukan jawabannya di postingan ini tag tautan jquery aktifkan nonaktifkan

var disableScroll = function(e){
    if (e.keyCode === 40 || e.keyCode === 38) {
        e.preventDefault();
        return false;
    }
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }
person elclanrs    schedule 13.02.2012

arrow_upward
0
arrow_downward

Anda perlu membatalkan acara keydown untuk tombol panah. Gunakan e.preventDefault() atau return false di pengendali .keydown() Anda jika tombol panah telah ditekan.

person gilly3    schedule 13.12.2011

arrow_upward
-1
arrow_downward

Ini sangat sederhana. Anda bahkan tidak perlu jQuery untuk ini.

jQuery:

$("body").css("overflow", "hidden");

javascript

<body style="overflow: hidden">

Menambahkan gaya:

<style>
 body {width:100%; height:100%; overflow:hidden, margin:0}
 html {width:100%; height:100%; overflow:hidden}
</style>

jika Anda ingin mengikat tombol panah, coba sesuatu seperti:

$('body').keydown(function(e){
    e.preventDefult();
    if(e.keyCode == 37) // for left key
    {
        // implement focus functionality
    }
    if(e.keyCode == 38) // for up key
    {
        // implement focus functionality
    }
    if(e.keyCode == 39) // for right key
    {
        // implement focus functionality
    }
    if(e.keyCode == 40) // for doqn key
    {
        // implement focus functionality
    }
});
person dku.rajkumar    schedule 13.12.2011
comment
Masalah dengan pendekatan ini adalah bilah gulir menghilang sehingga konten bergeser dan Anda harus menghitung offsetnya. Saya mencoba ini, terlalu rumit dan tidak perlu... - person elclanrs; 13.12.2011

arrow_upward
-1
arrow_downward

Cara terbaik untuk mencapai hal yang sama adalah dengan mengatur luapan tubuh menjadi tersembunyi

$("body").css("overflow", "hidden");

Setelah proses lakukan saja yang sebaliknya

`$("body").css("overflow", "hidden");
person Tarun Gupta    schedule 17.08.2013