ป้องกันการเลื่อนหน้าต่าง jquery

ฉันกำลังพัฒนาการแทนที่เมนูแบบเลือกใน jquery
ก่อนอื่นฉันต้องทำให้เมนูเลือกใหม่สามารถโฟกัสได้โดยเพียงเพิ่ม tabindex="0" ลงในคอนเทนเนอร์
จากนั้น ฉันปิดการใช้งานโฟกัสบนเมนูเลือกดั้งเดิมและให้ความสำคัญกับ อันใหม่. เมื่อโฟกัสอันใหม่แล้วคุณกดลูกศรขึ้นและลง ตัวเลือกจะเปลี่ยนไปตามนั้น แต่มีปัญหาใหญ่ เมื่อคุณกดลูกศร ร่างกายจะเคลื่อนไหวไปด้วย
จนถึงตอนนี้ฉันได้ลองวิธีแก้ปัญหาเหล่านี้ทั้งหมดแล้ว แต่โชคไม่ดีเลย:

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

ตรวจสอบโค้ดที่นี่ http://pastebin.com/pVNMqyui โค้ดนี้มาจากเวอร์ชันพัฒนาของ Ideal Forms http://code.google.com/p/idealforms ที่ฉันกำลังจะออกเร็วๆ นี้ พร้อมรองรับคีย์บอร์ด

มีความคิดเห็นใดบ้างว่าทำไมสิ่งนี้ถึงใช้งานไม่ได้?

แก้ไข: แก้ไขแล้ว!

พบคำตอบในโพสต์นี้ แท็ก jquery link เปิดใช้งานปิดการใช้งาน

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

มันได้ผล!


javascript scroll jquery
person elclanrs    schedule 13.12.2011    source แหล่งที่มา
comment
บางทีนี่อาจเป็นงานสำหรับ event.preventDefault(); ในตัวจัดการสำหรับเหตุการณ์ใด ๆ ที่อาจทำให้หน้าต่างเลื่อน...   -  person Aaron    schedule 13.12.2011
comment
คุณควรเพิ่มสิ่งนี้เป็นคำตอบสำหรับคำถามของคุณเอง   -  person Merlyn Morgan-Graham    schedule 13.12.2011

คำตอบ (5)


arrow_upward
2
arrow_downward

ในตัวจัดการคีย์ดาวน์ของคุณ สำหรับคีย์ขึ้นและลง ให้คืนค่าเท็จดังนี้:

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

นอกจากนี้ ตรวจสอบให้แน่ใจว่าการส่งคืนนี้ได้รับการเผยแพร่ไปยัง onkeydown ดั้งเดิมของเบราว์เซอร์ ขึ้นอยู่กับวิธี/เฟรมเวิร์กที่คุณใช้

person techfoobar    schedule 13.12.2011

arrow_upward
0
arrow_downward

พบคำตอบในโพสต์นี้ แท็ก jquery link เปิดใช้งานปิดการใช้งาน

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

คุณต้องยกเลิกเหตุการณ์การกดปุ่มลูกศรลง ใช้ e.preventDefault() หรือ return false ในตัวจัดการ .keydown() ของคุณหากกดปุ่มลูกศร

person gilly3    schedule 13.12.2011

arrow_upward
-1
arrow_downward

มันง่ายมากคุณไม่จำเป็นต้องใช้ jQuery สำหรับสิ่งนี้ด้วยซ้ำ

เจคิวรี:

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

จาวาสคริปต์

<body style="overflow: hidden">

เพิ่มความมีสไตล์:

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

หากคุณต้องการผูกปุ่มลูกศร ให้ลองทำดังนี้:

$('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
ปัญหาของแนวทางนี้คือแถบเลื่อนหายไปทำให้เนื้อหามีการเปลี่ยนแปลง จากนั้นคุณจะต้องคำนวณค่าชดเชยด้วยวิธีใดวิธีหนึ่ง ฉันลองสิ่งนี้แล้ว ซับซ้อนเกินไปและไม่จำเป็น ... - person elclanrs; 13.12.2011

arrow_upward
-1
arrow_downward

วิธีที่ดีที่สุดในการบรรลุเป้าหมายเดียวกันคือตั้งค่าส่วนที่ล้นของร่างกายให้ซ่อนไว้

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

หลังจากกระบวนการนี้ให้ทำตรงกันข้าม

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