Измените прокрутку скрытого отделения
У меня есть скрытое отделение с фиксированной высотой и полосой прокрутки. Я хотел бы сменить положение прокрутки, но браузер не будет le меня делать это, поскольку отделение скрыто. scrollTop свойство будет придерживаться 0.
Кроме того, я не хочу показывать и скрывать отделение назад, которое вызывает мерцание.
Если кто-либо будет знать, как сделать это, это будет действительно полезно.
Спасибо!
3 ответа
Мой вопрос был не полным. div не скрыт сам по себе. Он является частью контейнера div, который скрыт. Внутренний div отображается вместе с его родителем.
<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>
Мы используем jQuery придумали пользовательское событие "onShow".
Так что теперь мы можем сделать следующее:
$('#my_div').bind('show', function() {
handle_scrollTopOffset();
});
Когда событие show привязывается, оно добавляет класс .onShow к div. А функция jQuery.fn.show() была переопределена, чтобы вызвать событие 'show' на дочерних элементах, которые имеют класс .onShow.
Спасибо всем за предложения. Извините, что задал неполный вопрос. Я расскажу все подробности в следующий раз.
Вы можете сохранить прокрутку с помощью функции данных jQuery.
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: ""
});
}
Это может помочь
Вы можете просто использовать visibility: hidden вместо display: none . Видимость сохраняет элемент на месте. Я считаю, что это то же самое, что и opacity: 0 , но это кроссбраузерное решение.
Чтобы предотвратить мерцание div и исправить недоступность "display: none;" :
.hidden {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}