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

Мне удалось сделать тег DIV невидимым в JavaScript, установив для отображения значение none и видимость - hidden. Этого также можно добиться с помощью этого класса:

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

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

РЕДАКТИРОВАТЬ:

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

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

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

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


javascript html css invisible
person Aram Kocharyan    schedule 25.02.2011    source источник
comment
Просто предположение, но будет ли это помещать его в контейнер div и отображать этот div невидимым? Поскольку это предположение, я не предлагаю его в качестве ответа.   -  person Dancrumb    schedule 25.02.2011
comment
Хммм, я думал, что добился успеха с вашим решением, но теперь я обнаружил, что браузер Android все еще прокручивается вверх ...: /   -  person Karussell    schedule 07.02.2012
comment
Ах, у меня нет андроида ...   -  person Aram Kocharyan    schedule 07.02.2012

Ответы (6)


arrow_upward
10
arrow_downward

Вероятно, это сработает:

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

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

person Bryan Downing    schedule 25.02.2011

arrow_upward
30
arrow_downward

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

person Chris Van Opstal    schedule 25.02.2011
comment
visibility:hidden по-прежнему приведет к тому, что элемент будет занимать место в макете. Я предполагаю, что это не то, что ищет OP, потому что он доволен display: none без проблем с полосой прокрутки. - person Bryan Downing; 25.02.2011
comment
Да, я знаю о видимости, но если ваш DIV является блоком, он все равно будет занимать это место. - person Aram Kocharyan; 25.02.2011
comment
+1 спасибо, что указали на visibility: hidden vs. display: none. Это полезное различие. - person ashes999; 08.06.2013
comment
Действительно работает: ‹div class = editor-field style = display: none› ‹/div› - person user1575120; 14.04.2015

arrow_upward
5
arrow_downward

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

person Ali    schedule 25.02.2011
comment
На самом деле я надеялся не использовать jquery без необходимости, но это был бы гораздо более простой вариант, если посмотреть на весь код, который я написал :) - person Aram Kocharyan; 25.02.2011

arrow_upward
5
arrow_downward

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

arrow_upward
3
arrow_downward

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

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

person jpsimons    schedule 25.02.2011

arrow_upward
2
arrow_downward

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

person Macarrao    schedule 16.06.2016