javascript - Change the scroll of an hidden div - Stack Overflow

admin管理员组

文章数量:1277384

I have an hidden div with a fixed height and a scrollbar. I would like to change the scroll position, but the browser won't le me do it, as the div is hidden. The scrollTop property will stick to 0.

Also, I don't want to show and hide the div back, which causes flickering.

If anyone knows how to do it, it'll be really helpful.

Thanks!

I have an hidden div with a fixed height and a scrollbar. I would like to change the scroll position, but the browser won't le me do it, as the div is hidden. The scrollTop property will stick to 0.

Also, I don't want to show and hide the div back, which causes flickering.

If anyone knows how to do it, it'll be really helpful.

Thanks!

• javascript
• jquery
• scroll
• hidden

Share Improve this question Follow asked Jun 23, 2010 at 10:36 SavagemanSavageman 9,48766 gold badges4242 silver badges5050 bronze badges 1

• Can't you change the scroll position when you unhide it? – NibblyPig Commented Jun 23, 2010 at 10:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can save the scroll using jQuery's data function.

function SaveScroll(val)
{
    $(the_element).data("Scroll", val);
}

function Show()
{
    var element = $(the_element);

    // prevent from showing while scrolling
    element.css
    ({
        position: "absolute",
        top: "-50000px",
        left: "-50000px",
        display: ""
    });

    // Scroll to the position set when it was hidden
    element.scrollTop(element.data("Scroll"));

    // show the element
    element.css
    ({
        position: "",
        top: "",
        left: ""
    });
}

This might do the trick

---

You maybe can just use visibility: hidden instead of display: none. The visibility keeps the element where it is. I believe it is the exact same thing as opacity: 0, but it is a cross-browser solution.

To prevent div flickering and fix <div> unavailability for scripts you can use position hiding instead of "display: none;":

.hidden {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

My question was not plete. The div is not hidden on his own. It's part of a container div, which is hidden. The inner div displays with his parent.

<div class="container hidden">
    <div id="some_div">Content</div>
    <div id="my_div">I wanted to scroll this one</div>
    <div id="other_div">Content</div>
</div>

We use jQuery came up with a custom "onShow" event.

So now we can do this:

$('#my_div').bind('show', function() {
    handle_scrollTopOffset();
});

When the show event is bound, it adds the class .onShow to the div. And the jQuery.fn.show() function has been overridden to trigger the 'show' event on the childs which have the .onShow class.

Thanks everyone for their suggestions. I'm sorry I provided a unplete question. I'll give all the details next time.

本文标签： javascriptChange the scroll of an hidden divStack Overflow