तो DOM scrollIntoView शीर्ष/नीचे संरेखित करता है, लेकिन बाएं/दाएं के बारे में क्या?

Question

मैं क्षैतिज रूप से दिए गए तत्व को स्क्रॉल करना चाहता हूं। मुझे लगता है कि एकमात्र तरीका ScrollIntoView DOM विधि का उपयोग कर रहा है, जो दृश्य शीर्ष के साथ तत्व के निचले हिस्से को ऊपर या शीर्ष के साथ संरेखित करने की अनुमति देता है।

लेकिन वाई अक्ष के संबंध में तत्व ठीक है, और मैं केवल क्षैतिज स्क्रॉल करना चाहता हूं? मैं अपने बाएं को दृश्य के साथ बाएं या उसके दाएं दृश्य के साथ कैसे संरेखित कर सकता हूं?

संपादित

यहाँ और अधिक संदर्भ है। मेरे पास एक क्षैतिज स्क्रॉलबार के साथ एक यूयूआई टेबल है। मैं इसे एक निश्चित टीडी नोड के लिए प्रोग्रामेटिक रूप से स्क्रॉल करना चाहता हूं। मुझे नहीं लगता कि window.scrollTo मेरे लिए कोई मदद है, क्योंकि स्क्रॉलबार एक div तत्व पर है, पूरे पृष्ठ पर नहीं।

EDIT2

बाहर बदल जाता है वहाँ एक नकली अतः सही जवाब के साथ सवाल यह है कि - How can I scroll programmatically a div with its own scrollbars?

वोटिंग मेरा बंद हुआ।

Answer 1

यह कुछ ऐसा है जो मैंने थोड़ी देर पहले उपयोग किया था। वहाँ यह कर के बेहतर और अधिक कारगर तरीका हो सकता है, लेकिन यह काम हो जाता है:

$(".item").click(function(event){ 
    event.preventDefault(); 
    // I broke it down into variable to make it easier to read 
    var tgt_full = this.href, 
     parts = tgt_full.split("#"), 
     tgt_clean = parts[1], 
     tgt_offset = $("#"+tgt_clean).offset(), 
     tgt_left = tgt_offset.left; 

    $('html, body').animate({scrollLeft:tgt_left}, 1000, "easeInOutExpo");   
}) 

तुम बस यह सुनिश्चित करें कि item एक href कि लक्ष्य id तत्व से मेल खाती है के साथ एक a टैग है बनाने की जरूरत है:

HTML:

<a href="#one">go to section 1</a> 
... 
<section id="one"> Section 1</section> 

आशा इस मदद करता है!

Answer 2

मुझे हाल ही में एक टेबल हेडर के साथ समस्या थी जिसमें प्रत्येक कॉलम के लिए फ़िल्टर के रूप में इनपुट था। फिल्टर के माध्यम से टैब्स फोकस को स्थानांतरित करेगा, लेकिन यदि इनपुट में से कोई दिखाई नहीं दे रहा था या यदि यह आंशिक रूप से दिखाई देता था, तो यह केवल इनपुट को देखने में लाएगा, और मुझे पूर्ण इनपुट और कॉलम को देखने के लिए कहा गया था। और फिर मुझे बाएं तरफ टैब्स करने पर ऐसा करने के लिए कहा गया था।

document.getElementById('myElement').scrollLeft = 50; 

या: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal

संक्षिप्त उत्तर है कि आप उपयोग करना चाहते है:

यह लिंक मुझे मिल शुरू करने के लिए मदद की

$('#myElement')[0].scrollLeft = 50; 

यहाँ मेरी समाधान है (जो हो सकता है इस सवाल के लिए ओवरकिल, लेकिन शायद यह किसी की मदद करेगा):

// I used $.on() because the table was re-created every time the data was refreshed 
// #tableWrapper is the div that limits the size of the viewable table 
// don't ask me why I had to move the head head AND the body, they were in 2 different tables & divs, I didn't make the page 

$('#someParentDiv').on('focus', '#tableWrapper input', function() { 
    var tableWidth = $('#tableWrapper')[0].offsetWidth; 
    var cellOffset = $(this).parent()[0].offsetLeft; 
    var cellWidth = $(this).parent()[0].offsetWidth; 
    var cellTotalOffset = cellOffset + cellWidth; 

     // if cell is cut off on the right 
    if (cellTotalOffset > tableWidth) { 
     var difference = cellTotalOffset - tableWidth; 
     $('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft = difference; 
     $('#tableWrapper').find('.dataTables_scrollBody')[0].scrollLeft = difference; 
    } 
     // if cell is cut off on the left 
    else if ($('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft > cellOffset) { 
     $('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft = cellOffset; 
     $('#tableWrapper').find('.dataTables_scrollBody')[0].scrollLeft = cellOffset; 
    } 
});