it-swarm.com.ru

Принудительное отображение вертикальной полосы прокрутки в IE8

Вертикальная черта не отображается в IE8, если страница недостаточно длинная. В FF есть обходной путь для этого

html {
    overflow: -moz-scrollbars-vertical;
} 

Я попробовал следующее для IE8: overflow:scroll;, но полоса прокрутки появляется с обеих сторон. Я хочу это только для вертикальной, а не горизонтальной. scroll-y не работает.

Любое решение?

11
Alec Smart

О, понял это. это

body {
   overflow-y: scroll;
}
19
Alec Smart

Я использую следующее:

html {
    height: 101%; /* setting height to 101% forces scroll bar to display */
}
8
chip

Пытаться

-ms-overflow-y : scroll;

7
Dave

положить его в свой div, т. е.

style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;

например :

<div class="left" style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;
 width: 230px; height: 500px;" >
4
Shubham

Другое решение состоит в том, чтобы установить рост тела на 100% - см. Пример до/после на http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm

3
Waggers

html, body {height: 100.1%; }

2
Sebastián

Лучший ответ на дату (май 2012 г.) для принудительной установки вертикальной полосы прокрутки в Safari, opera & firefox:

html {
    height: 101%; /* setting height to 101% forces scroll bar to display */
}
html { min-height: 100%; padding-bottom: 1px; }

Opera была самой сложной и вставляла бы вертикальную полосу прокрутки, независимо от высоты страницы, только если использовались оба HTML-тега выше.

Спасибо - Диана

2
Dianne
html {height: 100%; margin-bottom: 1px;}

Делает вашу страницу всегда на 1 пиксель длиннее, поэтому полосы прокрутки всегда появляются и добавляет прокрутку на 1 пиксель только к страницам, которые недостаточно длинны, поэтому это не заставит зрителя думать, что они что-то упустили, и прокрутить вниз без причины. Простой и работает во всех основных потоковых браузерах (которые я тестировал)

1
Jonesy

Просто отметив, что normalize.css рекомендуется:

html { overflow-y: scroll; }

который немного отличается от ответа Алека, но с тех пор отбросил его. За HTML5 Boilerplate :

Следующий стиль больше не включается по умолчанию из-за проблем, которые могут возникнуть в Firefox в сочетании с плагинами JS (такими как модалы или пользовательские интерфейсы перетаскивания), которые основаны на вычислениях размеров области просмотра.

И действительно, мой опыт показывает, что он испортил некоторые плагины jQuery.

Я не уверен, почему различные решения min-height/margin-bottom/padding-bottom не являются предпочтительными, но они создают активную полосу прокрутки (хотя и с перемещением в 1 пиксель), тогда как overflow-y создает отключенную полосу прокрутки, которая лучше.

1
Arnon Weinberg
html {
    height: 100%;
    border-bottom: 1px #999 solid;
}

ПРИМЕЧАНИЕ. Я хотел использовать полосу прокрутки на страницах, которые, как мне известно, прокручивать не нужно. Это решение для такой ситуации.

Решение Jonesy не работает для меня во всех браузерах, но я готов иметь незначительную 1px серую полосу, которая работает последовательно во всех браузерах. Для меня это лучше, чем показывать полный дополнительный 1% (решение чипа). Мудрый дизайн, это даже не уступка, потому что это так незначительно - попробуйте и посмотрите, что я имею в виду.

Кроме того, это решение будет очень перспективным. Если вы хотите добавить пустое пространство, как и в других решениях, невозможно сказать, какие оптимизации будут встроены в будущие браузеры, и я мог бы представить, чтобы какой-то браузер обнаруживал потерянное пустое пространство и устранял его (происходили более странные вещи). Пропуская 1px, вы заставляете браузер работать с этим 1 пикселем, несмотря ни на что.

0
JoshuaDavid

Хорошо, смотрите мой код, дата находится внутри 1 DIV

<div style="overflow-y: scroll; overflow-x: scroll; width: 44em; height: 17em;">
    <p:dataTable id="dataTableDeposito" lazy="true"  style="width: 1040px; height: 240px; "
                 selection="#{envioValijaView.selectedItems}"
                 emptyMessage="#{msg.tablaVaciaDeposito}"
                 value="#{envioValijaView.valijaManagedBean.valijaBean.listaDepositos}"
                 var="tablaDepositos"
                 rowKey="#{tablaDepositos.idDespositoCheque}">


        <p:column sortBy="bancoBean.nombreBanco"  headerText="#{label.fechaHora}" styleClass="texto_14" width="150">
                <h:outputLabel style="font-size: 12px; text-align: center;" value="#{label.cantDepositos}"/>
        </p:column>

        <p:column sortBy="nroCataporte" headerText="#{label.nroCataporte}" styleClass="texto_14" disabledSelection="#{true}" width="150">
            <p:commandLink action="#{envioValijaView.detalleDeposito}" value="#{tablaDepositos.idDespositoCheque}">
                <f:setPropertyActionListener value="#{tablaDepositos}" target="#{envioValijaView.depositoChequeBean}"/>
            </p:commandLink>
        </p:column>

        <p:column sortBy="nroCheque" headerText="#{label.cantiDepositos}" styleClass="texto_14" width="155">
            <h:outputLabel value="#{label.montTotalDeposito}" styleClass="texto_12"/>
        </p:column>

        <p:column sortBy="monto" headerText="#{label.montoTotal}"  styleClass="texto_14" width="150">
            <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12">
                <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/>
            </h:outputText>
        </p:column>

        <!-- Verificar -->
        <p:column sortBy="monto" headerText="#{label.transportista}"  styleClass="texto_14" width="150" >
            <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12">
                <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/>
            </h:outputText>
        </p:column>

        <p:column sortBy="monto" headerText="#{label.estado}"  styleClass="texto_14" width="150">
            <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12">
                <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/>
            </h:outputText>
        </p:column>
    </p:dataTable>
</div>
0
user2896372

Добавить переполнение: авто в CSS для HTML-тега.

0
Vibhor