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!

Answer 1

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.