कुंजी डाउन और ऊपर

Question

पर आंतरिक div को स्क्रॉल करना मैंने एक स्वतः पूर्ण कंटेनर बनाया है जो पहले चार परिणाम प्रदर्शित करता है और बाकी छिपे हुए होते हैं और इन्हें आंतरिक div तत्व को स्क्रॉल करते समय देखा जा सकता है जिसमें सभी परिणाम होते हैं।

उपयोगकर्ताओं ने परिणामों के माध्यम से आसानी से नेविगेट करने के लिए ऊपर और नीचे कुंजी दबाते समय कुंजी को लागू किया है, लेकिन परिणामों के साथ आंतरिक div स्क्रॉल नहीं कर रहा है।

आप ऐसे तत्व को कैसे स्क्रॉल कर सकते हैं जिसमें overflow-y:hidden है और विंडो नहीं?

jsFiddle example here

उदाहरण में, बस इनपुट बॉक्स के अंदर कोई भी कुंजी दबाएं और नीचे जाने के लिए अपने तीर का उपयोग करें, तो आप वहाँ इसे लागू करने के कई तरीके हैं कि div स्क्रॉल नहीं है

Answer 1

आप को अपनी स्क्रिप्ट को अपडेट कर सकते पारित कर दिया

$(".someInput").on("keyup", function(e) { 
    $(".wrapper").show(); 
    if (e.which == 40) { 
     $('.element:not(:last-child).element-hover').removeClass('element-hover').next().addClass('element-hover'); 
    } else if (e.which == 38) { 
     $('.element:not(:first-child).element-hover').removeClass('element-hover').prev().addClass('element-hover');  
    } 
    //scroll to element: 
    $(".wrapper .inner_div").scrollTop(0);//set to top 
    $(".wrapper .inner_div").scrollTop($('.element-hover:first').offset().top-$(".wrapper .inner_div").height());//then set equal to the position of the selected element minus the height of scrolling div 
}); 

http://jsfiddle.net/kMzR9/3/

Answer 2

देखेंगे । और आपके लिए सटीक समाधान आपके संदर्भ पर विचार करने की आवश्यकता है। और भीतरी div में (जो सामग्री पकड़) का उपयोग 'स्थिति: पूर्ण' और 'शीर्ष:

वैसे भी, एक संभव समाधान कंटेनर div' रिश्तेदारस्थिति 'में उपयोग करने के लिए है : 0 पीएक्स '। जब उपयोगकर्ता ऊपर/नीचे तीरों पर दबाते हैं तो आप तदनुसार शीर्ष संपत्ति को बदलते हैं।

सीएसएस:

.container { 
    position: relative; 
    height: 50px; 
    width: 200px; 
    overflow: hidden; 
    border: 1px solid blue; 
} 

.content { 
    position: absolute; 
    top: 0px; 
} 

जावास्क्रिप्ट:

function moveContent(px) { 
    var top = $('.content').position().top; 
    $(".content").css("top", top+px); 
} 

$(document).keydown(function(e){ 
    if (e.keyCode == 38) { 
     moveContent(-5); 
    } 
    if (e.keyCode == 40) { 
     moveContent(5); 
    } 
}); 

HTML:

<div class="container"> 
    <div class="content"> 
     hello 1<br/> 
     hello 2<br/> 
     hello 3<br/> 
     hello 4<br/> 
     hello 5<br/> 
     hello 6<br/> 
    </div> 
</div> 

में मेरे उदाहरण देखें: http://jsfiddle.net/Kq2Qq/3/

Answer 3

दो साल ... सिर्फ मामले में किसी को इस पर ठोकर, मेरे जैसे: चयनित तत्व की सापेक्ष स्थिति खोजने के लिए और इसे करने के लिए स्क्रॉल करें।

(लेफ्ट आउट:: शुद्ध जे एस में तत्वों पाने के लिए) moobs जवाब में अंतिम दो पंक्तियों के अलावा, सादा जावास्क्रिप्ट (कोई टिप्पणी अभी तक ... ऐसा नहीं कर सकते), तो:

$innerDiv.scrollTop = $hoveredElement.offsetTop - $innerDiv.clientHeight;

वहाँ

भी नया मान

Answer 4

हाल ही में मैं एक ही समस्या का सामना करना पड़ा और का उपयोग करके इसे हल सौंपने से पहले शून्य करने के लिए scrollTop "रीसेट" करने की कोई जरूरत हो रहा है। पाठ scrollIntoView() पर जोर दिया, नमूना कोड नीचे है।ऊपर तीर कुंजी के लिए क्रमश: और नीचे दो समारोह का उदाहरण कुंजी तीर

moveUp: function(e) { 
     if (current > 0) { 
      current--; 
      var allNOdes = document.getElementById('list').childNodes; 
      e.stopPropagation(); 
      if (allNOdes[current]) { 
       allNOdes[current].scrollIntoView(true); 
      } 
     } 
    }, 
    moveDown: function(e) { 
     if (current < 10) { 
      current++; 
      var allNOdes = document.getElementById('list').childNodes; 
      e.stopPropagation(); 
      if (allNOdes[current]) { 
       allNOdes[current].scrollIntoView(true); 
      } 
     } 
    } 

शुरू में के रूप में 0 एचटीएमएल वर्तमान को परिभाषित:

<div class="wrapper"> 
<div class="result" id="list"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 
</div> 

सीएसएस:

.wrapper{ 
    position: relative; 
    height: 150px; 
    width: 100px; 
    overflow: hidden; 
} 

.result{ 
    position: absolute; 
}