javascript - So DOM scrollIntoView aligns topbottom, but what about leftright? - Stack Overflow

admin管理员组

文章数量:1350079

I would like to scroll horizontally the given element. The only way I find is using ScrollIntoView DOM method, which allows either align the element's bottom with the view bottom or the top - with the view top.

But what if the element is OK with respect to the Y axis, and I only want to scroll it horizontally? How can I align its left with the view left or its right with the view right?

EDIT

Here is more context. I have a YUI table with a horizontal scrollbar. I wish to scroll it programmatically to a certain TD node. I do not think window.scrollTo is of any help to me, since the scrollbar is on a div element, not on the whole page.

EDIT2

Turns out there is a duplicate SO question with the right answer - How can I scroll programmatically a div with its own scrollbars?

Voting to close mine.

I would like to scroll horizontally the given element. The only way I find is using ScrollIntoView DOM method, which allows either align the element's bottom with the view bottom or the top - with the view top.

But what if the element is OK with respect to the Y axis, and I only want to scroll it horizontally? How can I align its left with the view left or its right with the view right?

EDIT

Here is more context. I have a YUI table with a horizontal scrollbar. I wish to scroll it programmatically to a certain TD node. I do not think window.scrollTo is of any help to me, since the scrollbar is on a div element, not on the whole page.

EDIT2

Turns out there is a duplicate SO question with the right answer - How can I scroll programmatically a div with its own scrollbars?

Voting to close mine.

• javascript
• html
• dom
• horizontal-scrolling

Share Improve this question Follow edited May 23, 2017 at 12:33 CommunityBot 111 silver badge asked Dec 24, 2012 at 16:40 markmark 63k9696 gold badges346346 silver badges670670 bronze badges 5

• The jQuery scrollTo plugin can handle this in variety of methods. Is jQuery an option? – John Dvorak Commented Dec 24, 2012 at 16:50
• I am using YUI. How does jQuery do it? What DOM API does it use? – mark Commented Dec 24, 2012 at 17:10
• Look into window.scrollTo and window.scrollBy - kinda lowlevelish, but you have full power over the process – John Dvorak Commented Dec 24, 2012 at 17:16
• Why window? I am not scrolling a window. I have an element with a table with a horizontal scrollbar and I need to scroll horizontally to a certain TD cell. – mark Commented Dec 25, 2012 at 2:17
• 1 possible duplicate of How can I scroll programmatically a div with its own scrollbars? – mark Commented Dec 28, 2012 at 16:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

I've recently had a problem with a table header that had inputs as filters for each column. Tabbing through the filters would move the focus, but if one of the inputs wasn't visible or if it was partly visible, it would only JUST bring the input into view, and I was asked to bring the full input and column into view. And then I was asked to do the same if tabbing backwards to the left.

This link helped to get me started: http://www.webdeveloper./forum/showthread.php?197612-scrollIntoView-horizontal

The short answer is that you want to use:

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

or:

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

Here's my solution (which may be overkill for this question, but maybe it'll help someone):

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

This is something I used a while back. There might be better and more efficient way of doing it but this gets the work done:

$(".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");          
})

You just need to make sure that the item is an a tag with an href that corresponds to the target id element:

HTML:

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

Hope this helps!

本文标签： javascriptSo DOM scrollIntoView aligns topbottombut what about leftrightStack Overflow