webkit-desbordamiento de desplazamiento propiedad
MDN resume en el siguiente
-webkit-desbordamiento de desplazamiento propiedades de los elementos de control en el dispositivo móvil es usar el efecto de vuelta del resorte de desplazamiento.
Opciones de valor
1, auto
la utilización del neumático ordinario, cuando el dedo se retira de la pantalla táctil, el desplazamiento se detenga inmediatamente
2, toque
con el desplazamiento tiene un efecto de rebote cuando el dedo se retira de la pantalla táctil, el contenido seguirá efecto de desplazamiento durante algún tiempo. Continuar la velocidad de desplazamiento es proporcional a la duración e intensidad del desplazamiento y el gesto. Sino también crear un nuevo contexto de pila.
problema El error
1, utilizando webkit-desbordamiento de desplazamiento: después del contacto, página de vez en cuando atascado no se mueve.
Vuelva a vivir el rey : la página Discovery es un problema atascado no se produce durante el laminado, pero los problemas surgirán en la barra de desplazamiento hacia la parte superior o inferior cuando el
análisis del problema : arriba / abajo, si no llega a tiempo para llegar a la parte superior / inferior , puede evitar este problema no es
una solución : slide Añadir cuando una zona de deslizamiento scroll事件del monitor si la barra de desplazamiento hacia la parte inferior / superior si la parte superior / inferior a continuación, hacer scrollTopuna reducción correspondiente 1;
código es el siguiente:
// js 文件
// 获取滚动区域
let el = document.getElementById('scrollSectionArea')
// 获取滚动内容的高度 如果是在是vue 使用动态的获取高度请将获取元素替换为 ref 来获取,不然是获取不到高度的 在监听函数内部注意this指向
let scrollHeight = document.getElementById('scrollSection').scrollHeight;
el.addEventListener('scroll', function() {
// 如果滚动条到顶部/底部则scrollTop值相应的减 1
if (el.scrollTop <= 1) {
el.scrollTop = 1;
}
if ((el.scrollTop + el.offsetHeight) >= (scrollHeight - 1)) {
el.scrollTop = scrollHeight - el.offsetHeight - 1;
}
});
2 se utilizó -webkit-desbordamiento de desplazamiento: Después de que el tacto, causa pop base (desplazamiento a través) de deslizamiento.
Vuelva a vivir el rey : ventanas emergentes con contenido de la diapositiva de desplazamiento en el extremo o la parte superior de los disparadores subyacentes de rodadura;
análisis del problema : penetración eventos de desplazamiento,
solución : cuando se desplaza registro pantalla emergente fija en la parte inferior y el valor inferior scrollTop, y el contenido inferior ajuste de la posición: fijo;
altura: 100%, para lograr el propósito de la fijación de la parte inferior, a continuación, puede evitar el penetrar material móvil;
código como sigue:
// css
/* 解决点击穿透滑动失效 */
.mask_show {
position: fixed;
height: 100%;
}
// js部分
data:{
return {
...
eventScrollTop: 0
...
}
}
methods:{
// 弹窗显示的时候调用 记录底部滚动条位置
setScrollTopValue() {
this.eventScrollTop = document.scrollingElement.scrollTop ||
document.documentElement.scrollTop ||
document.body.scrollTop;
document.body.classList.add('mask_show ');
document.body.style.top = -this.eventScrollTop + 'px';
},
// 弹窗关闭的时候调用 回归到原来滚动条位置
useScrollTopValue() {
document.body.classList.remove('mask_show');
document.scrollingElement.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = this.eventScrollTop;
}
}
Documento de referencia: solución de penetración de desplazamiento para el problema
Inferior = scrollHeight- la offsetHeight scrollTop
la offsetHeight : elemento comprende un borde horizontal, el relleno y los elementos de barra de desplazamiento (si existe y renderizado) no está incluido: altura después de que otros elementos de tierras seudo: antes o.
la scrollHeight : Valor mínimo de llenado clientHeight ver todos los elementos requeridos para el mismo contenido. Incluyendo los elementos de relleno, pero no incluye los elementos bordes y márgenes. scrollHeight :: antes y también incluye tal un pseudo-elemento :: después. ↩︎
