Cuatro esquemas implementados dentro del extremo movimiento de balanceo

Para permitir que sólo una parte de la zona dentro de una región para producir un efecto de laminación, y el resto no puede moverse, qué método haría usted?

Autor: Ícaro
enlace original: HTTP: //xdlrt.github.io/2016/1 ...

En primer lugar, podemos poner esta demanda en dos pequeños problemas a resolver.

• La fijación de la zona parcial

• El área restante de desplazamiento

La fijación de la zona parcial

1. Para la sección del cuerpo de la página de configuración height: 100%, y overflow: hiddenesa página está desactivada nativa de desplazamiento asegurar que sólo muestra el contenido de una pantalla.

2. zona de fijación posicionamiento absoluto.

El área restante de desplazamiento

Propiedades básicasoverflow-y

MDN definición desbordamiento-y es
de un bloque de nivel de elemento, cuando se desborda. de El desbordamiento-y propiedad especifica si al clip de contenido, la A Barra de desplazamiento, o el contenido muestran el desbordamiento en la parte superior e inferior rendir
atributo especifica desbordamiento-y o se adapta el contenido y hace que una barra de desplazamiento, o elementos en bloque cuando el desbordamiento contenido de la pantalla en la parte superior o inferior de la de desbordamiento.

En pocas palabras, overflow-yla propiedad existe en el tiempo de desbordamiento dirección vertical, estableciendo valores diferentes dará lugar a un rendimiento diferente. Con el fin de lograr la función de desplazamiento que necesitamos para establecer la propiedad scrolly, a continuación, independientemente de si el contenido de los elementos en bloque de desbordamiento, la barra del navegador de desplazamiento generarán una parte oculta del contenedor y el contenido derramado, sólo aparecen después de desplazarse.

Por ejemplo:

.test{
    width: 200px;
    /* 关键样式 */
    height: 200px;
    overflow-y: scroll;
    /* 以下无关样式 */
    background: #f14c5c;
    color: #fff;
}
<div class="test">
    这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
    这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
    这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
    这里面只是一段测试的内容这里面只是一段测试的内容这里面只是一段测试的内容
</div>

Los resultados son los siguientes:

Sólo a modo de ejemplo, podemos concluir que mientras los elementos de bloque de restricciones de altura, sólo puede lograrse contenido natural del elemento pueden recorrerse sin afectar a otros contenidos. Pero los nuevos problemas que surgen en el proceso de implementación, cómo se reproducen con precisión la tabla de diseño? Los planes son los siguientes:

caja emergente con toda la altura de la página es altamente adaptable, una parte de cabecera y una parte de botón está fijado a la posición inferior, una lista intermedia necesita para llenar la altura restante, y el contenido se pueden desplazar. El conjunto se envuelve div más externa pop, botón inferior posicionado con respecto a la misma. Después de pensar, tratar cuatro programas, para que todos puedan compartir.

Descripción del programa

Necesitamos identificar la raíz del problema es el contenido de mediana estatura, que es heightla altura exacta a diferentes tamaños de pantalla.

artículos

Con respecto a la altura de la ventana gráfica, la ventana gráfica se divide en 100 unidades, es decir 1VH igual a 1% de la altura de la ventana gráfica.

Pero las unidades vh para la baja y el IOS versión de soporte de Android no es lo suficientemente bueno, micro-canales kernel navegador no soporta X5, aunque el núcleo ha sido actualizado para abrir y cerrar, pero para estar seguro, dejar de usar este programa. También es incapaz de controlar con precisión y los botones en el margen inferior.

el porcentaje de talla

Vh y los márgenes similares, no pueden ser controladas con precisión y parte inferior del botón, no efecto adaptativo.

Calc

Por lo anterior dos esquemas existen problemas, calcatributo calculado puede resolver, solo necesita ajustar height:calc(100% - 60px), puede ser precisa ocupa la parte media, y mantiene los márgenes y los botones inferiores.

Por desgracia para baja versión del navegador de Android, iOS navegadores incluyen navegador de micro-canales, incluyendo el soporte de los navegadores corriente principal no es bueno, todavía sólo está abandonado.
Si la compatibilidad no importa lo poco, a continuación, el programa Calc debe ser el mejor y más elegante con una implementación.

js

Sólo tiene que utilizar CSS no se puede lograr, que sólo se puede ajustar por medio de altamente JS para calcular dinámicamente el contenido requerido. Al mismo tiempo este método es apenas problemas de compatibilidad de encuentro, es una práctica de la degradación elegante.

digresión

Ocultar la barra de desplazamiento antiestético.

Si directamente overflow-y:scrollbarras de desplazamiento aparecen siempre en ios feo, podemos establecer las siguientes propiedades de los elementos:

margin-right: -20px;
padding-right: 20px;

Barra de desplazamiento por un pequeño corte, ya no aparecerá, y no habrá nativos para desplazarse por la misma sensación cuando la interacción del usuario, la experiencia mejor.

@__prototype__ sido en gran medida recordatorios, establezca la propiedad privada del navegador WebKit ::-webkit-scrollbarpuede ser más flexible barra de control de desplazamiento para agradecimiento. Si lo que desea es ocultar, el siguiente código:

::-webkit-scrollbar{
    display: none
}

Mientras que el navegador WebKit móvil mayor parte del núcleo terminal, pero todavía tiene que concluir que la prueba real y luego, si algunos navegadores no soportan este atributo, se puede seguir utilizando el anterior pequeño truco.

webkit-desbordamiento de desplazamiento: el tacto

En el dispositivo iOS, su uso overflowpara simular la situación, se desplazará Caton, se puede establecer -webkit-overflow-scrolling: toucha voluntad, porque la voluntad de crear un conjunto ios UIScrollView, usando aceleración por hardware de renderizado.

La pregunta en sí no es complicado, incluso después del cambio de la demanda, para lograr llegar a ser muy simple. Pero la esperanza de que a través de este pequeño ejemplo para que cada persona en el front-end necesidades de pensamiento son capaces de pensar más diversas formas como sea posible para resolver el problema, aunque sea temporalmente debido a la compatibilidad u otras razones no pueden ser alcanzados en este proceso crecimiento también es muy útil.