Есть ли CSS: видимый (прокрутка) селектор?

Question

Я хочу изменить стиль видимых элементов, используя только CSS. Есть ли селектор, который это делает? Он должен работать только с Chrome и Firefox. (Я строю расширение/аддон)

Если нет, есть ли способ изменить стиль видимых элементов с помощью легкого javascript?

---

Visible в пределах текущей позиции прокрутки. Элемент может быть вне видимости прокрутки или частично видимым.

Answer 1

Для оценки видимости нет стандартного правила CSS.

Как уже сказал, JQuery (если вы хотите использовать JQuery), имеет как CSS selector extension:visible и способность выполнять .is(':visible') на любом объекте JQuery, чтобы получить вычисленный стиль в любом DOM элементе с .css("display") или .css("visibility").

Это не так просто в простом javascript, чтобы определить, является ли объект видимым, потому что вам нужно получить computedStyle (чтобы принять во внимание все возможные правила CSS, которые могут влиять на элемент), и вы должны убедиться, что ни один из родительских объектов скрыты, заставляя дочерний элемент скрываться. Это функция, которая у меня есть в моей личной библиотеке:

Answer 2

Это выглядит как селектор :visible мне: http://api.jquery.com/visible-selector/

EDIT: Увидел ваш javascript тег перед вашим 'нет CSS' предостережения.

Но это сортировщик CSS.

Answer 3

Там нет никакого способа, чтобы выбрать невидимые элементы, используя чистый CSS

http://www.w3.org/TR/selectors/

Однако, если у вас есть имя класса или другой селектор, с помощью JQuery вы можете сделать что-то вроде следующего

jQuery(selector).each(function(){ 
    Var $this=$(this); 
    if ($this.css('visibility')==='hidden') 
     //set your style 
}) 

Редактировать: после редактирования вы определенно не можете выбрать, что находится внутри области просмотра только с помощью CSS. Это контекстно-свободный язык.

Тем не менее, вы всегда можете обмануть позицию смещения элементов с помощью jquery и определить, находится ли она в текущем окне просмотра (window.scrollposition или что-то подобное). Тем не менее, этот тип решения становится беспорядочным.

Answer 4

Существует нет чистого способа использования CSS. Как уже сказал комментарий Киреана, почему вы хотите стилизовать только видимые элементы? В любом случае, невидимые элементы не покажут своего стиля. Если вы не хотите, чтобы невидимый элемент занимал место (aka, out out), вы должны использовать display: none;

Если вы действительно хотите, чтобы селектор выбирал видимые элементы, вы могли бы сделать то, что предложил Widor, и использовать jQuery. Сначала вы можете использовать jQuery, чтобы сначала выбрать видимые элементы, добавить к ним класс, а затем использовать CSS для выбора элементов этого класса.

$('div:visible').addClass('visibleElement'); 


.visibleElement { 
    color: red; 
} 

Answer 5

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

$(window).scroll(function() { 
    $('.interestingElements:in-viewport').addClass('iSeeYou'); 
}); 

Надеюсь, в конце концов будет родная альтернатива CSS.