¿Hay un selector CSS: visible (scroll)?

Question

Quiero cambiar el estilo de los elementos visibles usando solo CSS. ¿Hay un selector que lo hace? Solo debe funcionar con Chrome y Firefox. (Estoy construyendo una extensión/complemento)

Si no lo hay, ¿hay alguna manera de cambiar el estilo de los elementos visibles con un ligero javascript?

---

visible dentro de la posición de desplazamiento actual. Un elemento puede estar fuera de la visión de desplazamiento, o parcialmente visible.

Answer 1

No existe una regla CSS pura estándar para evaluar la visibilidad.

Como han dicho otros, jQuery (si quieres usar jQuery) tiene tanto un CSS selector extension:visible y la capacidad de ejecutar .is(':visible') en cualquier objeto jQuery dado a conseguir el estilo calculado sobre cualquier elemento DOM dada con .css("display") o .css("visibility").

No es particularmente simple en javascript simple para determinar si un objeto es visible porque tiene que obtener el estilo computado (para tener en cuenta todas las reglas CSS posibles que puedan afectar el elemento) y debe asegurarse de que no haya objetos principales están ocultos y el elemento hijo está oculto. Esta es una función que tengo en mi biblioteca personal:

//---------------------------------------------------------------------------------------------------------------------------------- 
// JF.isVisible function 
// 
// Determines if the passed in object is visible (not visibility:hidden, not display: none 
// and all parents are visible too. 
// 
// Source: http://snipplr.com/view/7215/javascript-dom-element-visibility-checker/ 
//---------------------------------------------------------------------------------------------------------------------------------- 
JF.isVisible = function(obj) 
{ 
    var style; 

    if (obj == document) return true; 

    if (!obj) return false; 
    if (!obj.parentNode) return false; 
    if (obj.style) { 
     if (obj.style.display == 'none') return false; 
     if (obj.style.visibility == 'hidden') return false; 
    } 

    //Try the computed style in a standard way 
    if (window.getComputedStyle) { 
     style = window.getComputedStyle(obj, "") 
     if (style.display == 'none') return false; 
     if (style.visibility == 'hidden') return false; 
    } else { 
     //Or get the computed style using IE's silly proprietary way 
     style = obj.currentStyle; 
     if (style) { 
      if (style['display'] == 'none') return false; 
      if (style['visibility'] == 'hidden') return false; 
     } 
    } 

    return JF.isVisible(obj.parentNode); 
}; 

Answer 2

Esto parece un selector de :visible a mí: http://api.jquery.com/visible-selector/

EDITAR: Saw su etiqueta javascript antes de que su advertencia 'no CSS'.

Pero esto es un tipo de selector de CSS.

Answer 3

No hay manera de seleccionar los elementos invisibles, usando CSS puro

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

Sin embargo, si usted tiene un nombre de clase u otro selector, usando jQuery que puede hacer algo como lo siguiente

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

Editar: después de su edición, definitivamente no hay forma de seleccionar lo que está dentro de la ventana gráfica solo con CSS. Es un lenguaje de lenguaje sin contexto.

Sin embargo, siempre puede jugar con una posición de desplazamiento de elementos con jquery y determinar si está dentro de la ventana actual (window.scrollposition o algo similar). Sin embargo, este tipo de solución se complica rápidamente.

Answer 4

No hay una forma pura de CSS de hacer esto. Como ya dijo el comentario de Kirean, ¿por qué quieres diseñar elementos visibles solamente? Los elementos invisibles no mostrarán su estilo de todos modos. Si no desea que el elemento invisible ocupe espacio (aka, presentado), debe usar display: none;

Si REALMENTE desea que un selector seleccione los elementos visibles, puede hacer lo que Widor sugirió y usar jQuery. Primero puede usar jQuery para seleccionar los elementos visibles, agregarles una clase y luego usar CSS para seleccionar los elementos de esa clase.

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


.visibleElement { 
    color: red; 
} 

Answer 5

Si ya está usando jQuery, hay un plugin Viewport que le permite seleccionar lo que está en el área de visualización utilizando un selector CSS. Definitivamente no es CSS puro, pero parece ser la solución más cercana en este momento (una vez más, suponiendo que está bien con el uso de jQuery). Probablemente tenga que hacer algo como:

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

Afortunadamente, con el tiempo habrá una alternativa nativa de CSS.