Сделайте DIV невидимым в CSS и JavaScript

Мне удалось сделать тег DIV невидимым в JavaScript, установив отображение равным никому и видимость для скрытия. Это может быть достигнуто и с этим классом:

.invisible {
    display: none;
    visibility: hidden;
}

Дисплей не гарантирует, что поле DIV пустое, а скрытая видимость гарантирует, что он не будет виден. Проблема с этим методом заключается в том, когда у меня есть прокручиваемые DIV или текстовые поля с переполненным контентом, когда вы устанавливаете отображение: none, некоторые браузеры будут забывать позицию прокрутки для этих элементов. Есть ли лучший способ сделать DIV невидимым без использования свойства отображения? Я бы предпочел не использовать JavaScript для записи положения прокрутки и, если возможно,.

EDIT:

Мне удалось решить эту проблему с вашей помощью, я применил следующее:

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

Я пробовал влево: -9999px, но это расширяет вертикальную полосу прокрутки в IE... Я также обернул свою текстовую область в другой DIV и применил к ней видимые/невидимые стили, поскольку в противном случае текстовая область потеряла бы свою позицию прокрутки. Я тестировал это в Chrome, Firefox, IE и Safari на своем iPhone. Просто примечание, DIV, обернутое вокруг текстового поля, похоже, не помогло в FF, а полоса прокрутки все еще reset. Но прокручиваемые DIVs теперь прекрасны. Спасибо за вашу помощь!

Ответы

Ответ 1

Возможно, это сработает:

.invisible {
    position: absolute;
    left: -9999px;
}

EDIT: Я бы рассмотрел общие помощники в коде HTML5 Boilerplate, чтобы изучить другие способы что вещи исчезают.

Ответ 2

Вы можете просто использовать visibility:hidden, если хотите, чтобы элемент был невидимым, но все же отображался. display:none полностью удалит его и вызовет описанное поведение прокрутки.

Ответ 3

Вы можете использовать метод jQuery hide(). $ ( '# DIVID') скрыть(). или $('. DivClass'). hide();

Ответ 4

Макет, дисплей: ни один из них полностью не удаляется из дерева рендеринга и в эту неопределенность. Он больше не имеет четких размеров или положений.

Если вам нужен какой-то заполнитель для позиции прокрутки, я бы предложил использовать элемент-заполнитель. Будет работать DIV с нулевой высотой или даже с <a name="something""></a>.

Ответ 5

Я предпочитаю использовать фиксированную высоту и ширину (height: 0; width: 0;). Не забудьте удалить границы, прокладки и поля.

Ответ 6

Вы можете использовать jQuery для решения проблемы. Если вы хотите полностью скрыть/показать div, то вы можете использовать:

$('#my_element').show()
$('#my_element').hide()

И если вы хотите, чтобы ваш div стал невидимым и все еще существовал на странице, вы можете использовать эффективный трюк:

$('#my_element').css('opacity', '0.0');  // invisible Maximum
$('#my_element').css('opacity', '1.0');  // visible maximum