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

Question

Мне удалось сделать тег DIV невидимым в JavaScript, задав для дисплея значение «Нет», а видимость - «Скрытый». Это может быть достигнуто с этим классом также:

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

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

EDIT:

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

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

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

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

Answer 1

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

Answer 2

Это, вероятно, сработает:

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

РЕДАКТИРОВАТЬ: Я бы взглянул на общих помощников в коде HTML5 Boilerplate, чтобы изучить другие способызаставляя вещи исчезнуть.

Answer 3

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

Answer 4

Вы можете использовать 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

Answer 5

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

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

Answer 6

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