css - стили таргетинга при переполнении, вызывающем полосы прокрутки - PullRequest
Новая
       6

css - стили таргетинга при переполнении, вызывающем полосы прокрутки

1 голос
/ 12 апреля 2011

У меня есть такой div: 

<div id="test"></div>

#test {
  width:100px;
  overflow-y:auto;
}

Я хочу применить стили только в том случае, если overflow-y: auto фактически вызвал появление полосы прокрутки.Есть ли способ сделать это через CSS / CSS3?

Спасибо.

Ответы [ 3 ]

5 голосов
/ 12 апреля 2011

Нет, CSS не обеспечивает способ применения стилей на основе других вычисляемых стилей, поскольку вычисляемые стили зависят от браузера. Вместо этого вам придется делать это с помощью JavaScript, , если это возможно с этим (я предполагаю, что это как-то, но сейчас это не приходит мне в голову) взгляните на ответ Джошуа .

Кстати, вертикальная полоса прокрутки не появится на вашем <div>, если вы не укажете ее высоту. Без определения высоты он всегда будет расширяться, чтобы соответствовать его содержимому, устраняя необходимость в полосе прокрутки.

3 голосов
/ 13 апреля 2011

Как сказал BoltClock, просто сделать это невозможно с помощью CSS.Тем не менее, это можно сделать, если вы готовы использовать Javascript.По сути, вы хотите стилизовать любой переполненный элемент, у которого scrollHeight больше, чем clientHeight.Вот простой пример, который запускает скрипт при загрузке страницы и добавляет «переполненный» класс к элементам, имеющим полосы прокрутки: 

<html><head><title>Overflow styling example</title>
<style type="text/css">
    div.outerdiv
    {
        width: 100px;
        height: 100px;
        overflow-y: auto;
        float: left;
        margin: 20px;
        border: 1px solid black;
    }

    div.outerdiv.overflowed
    {
        background-color: #9999FF
    }

</style>
<script type="text/javascript">
    function crossBrowserEventAttach(objectRef, eventName, functionRef)
    {
        try {
            objectRef.addEventListener(eventName, functionRef, false);
        }
        catch(err) {
            try {
                objectRef.attachEvent("on" + eventName, functionRef);
            }
            catch(err2) {
                // event attachment failed
            }
        }
    }

    function overflowCheck(element) {

        if (element.scrollHeight > element.clientHeight && element.className.indexOf("overflowed") < 0) {
            element.className = element.className + " overflowed";
        }
        else if (element.className.indexOf("overflowed") >= 0) {
            element.className = element.className.replace(" overflowed", "");
        }
    }

    function checkPage() {
        var elements = document.getElementsByTagName("div");
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].className.indexOf("outerdiv") >= 0) {
                overflowCheck(elements[i]);
            }
        }
    }

    crossBrowserEventAttach(window, "load", checkPage);
</script>
</head>
<body>

<div class="outerdiv">
    Line 1<br />Line 2
</div>

<div class="outerdiv">
    Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />Line 8<br />Line 9<br />Line 10<br />Line 11<br />Line 12<br />
</div>

<div class="outerdiv">
    Line 1<br />Line 2<br />Line 3<br />
</div>

<div class="outerdiv">
    Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />Line 8<br />Line 9<br />Line 10<br />Line 11<br />Line 12<br />
</div>

</body>
</html>

Если вы запустите это в своем браузере, div с содержимым достаточно высокимчтобы дать им полосы прокрутки должны быть синего цвета, а полосы без полос прокрутки должны быть белого цвета:

http://i51.tinypic.com/2zf96de.png

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

1 голос
/ 12 апреля 2011

Нет, вам придется вручную рассчитать доступную высоту содержащего элемента div и фактическую высоту рассматриваемого элемента. 

var containerHeight = $(container).height();
var elemHeight = $(elem).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + elemHeight;

the two case you need to check are
1. elemHeight > containerHeight 
2. elemBottom > containerHeight

Если любое из этих значений истинно, должна появиться вертикальная полоса прокрутки, если свойство overflow для контейнера установлено правильно.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...