Change the scroll of an hidden div

Question

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!

Noheminoil

Can't you change the scroll position when you unhide it? – Sales

Answer 1

My question was not complete. 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 uncomplete question. I'll give all the details next time.

Noheminoil

This was the best solution I found. Instead of an event I just moved the scrollTop() function from my closing function to my opening one. – Eccrinology

Answer 2

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.

Dubai

Answer 3

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

Gleiwitz