Tengo una lista, con overflow-x y overflow-y configurados en auto . Además, configuré el desplazamiento de impulso, por lo que el desplazamiento táctil funciona bien en dispositivos móviles, usando webkit-overflow-scrolling: true .
Sin embargo, el problema es que no puedo descifrar cómo deshabilitar el desplazamiento horizontal cuando me desplazo verticalmente. Conduce a una experiencia de usuario realmente mala, ya que deslizar el dedo hacia la esquina superior izquierda o la esquina superior derecha hará que la tabla se desplace en diagonal. Cuando el usuario se desplaza verticalmente, absolutamente NO quiero ningún desplazamiento horizontal hasta que el usuario haya dejado de desplazarse verticalmente.
He intentado lo siguiente:
JS:
offsetX: number; offsetY: number; isScrollingHorizontally = false; isScrollingVertically = false; //Detect the scrolling events ngOnInit() { this.scrollListener = this.renderer.listen( this.taskRows.nativeElement, 'scroll', evt => { this.didScroll(); } ); fromEvent(this.taskRows.nativeElement, 'scroll') .pipe( debounceTime(100), takeUntil(this.destroy$) ) .subscribe(() => { this.endScroll(); }); } didScroll() { if ((this.taskRows.nativeElement.scrollLeft != this.offsetX) && (!this.isScrollingHorizontally)){ console.log("Scrolling horizontally") this.isScrollingHorizontally = true; this.isScrollingVertically = false; this.changeDetectorRef.markForCheck(); }else if ((this.taskRows.nativeElement.scrollTop != this.offsetY) && (!this.isScrollingVertically)) { console.log("Scrolling Vertically") this.isScrollingHorizontally = false; this.isScrollingVertically = true; this.changeDetectorRef.markForCheck(); } } endScroll() { console.log("Ended scroll") this.isScrollingVertically = false; this.isScrollingHorizontally = false; this.changeDetectorRef.markForCheck(); }HTML:
<div class="cu-dashboard-table__scroll" [class.cu-dashboard-table__scroll_disable-x]="isScrollingVertically" [class.cu-dashboard-table__scroll_disable-y]="isScrollingHorizontally" >CSS:
&__scroll { display: flex; width: 100%; height: 100%; overflow-y: auto; overflow-x: auto; will-change: transform; -webkit-overflow-scrolling: touch; &_disable-x { overflow-x: hidden; } &_disable-y { overflow-y: hidden; } } Pero cada vez que configuro overflow-x o overflow-y en hidden cuando se ha desplazado, el desplazamiento fallará y volverá a la parte superior. También noté que webkit-overflow-scrolling: true es la razón por la que esto ocurre, cuando lo elimino, el comportamiento parece detenerse, pero lo necesito absolutamente para impulsar el desplazamiento en dispositivos móviles.
¿Cómo desactivo el desplazamiento horizontal cuando me desplazo verticalmente?
En general, es una mala práctica que su diseño necesite desplazamiento multieje en dispositivos móviles, a menos que esté mostrando grandes tablas de datos. Dicho esto, ¿por qué quieres evitarlo? Si un usuario quiere desplazarse en diagonal, no me parece el fin del mundo. Algunos navegadores, como Chrome en OSX, ya hacen lo que estás describiendo de forma predeterminada.
Si debe tener desplazamiento de un solo eje, una posible solución podría ser realizar un seguimiento de la posición de desplazamiento usted mismo a través de eventos touchstart y touchmove . Si configura su umbral de arrastre más bajo que el del navegador, es posible que pueda hacer sus cosas CSS antes de que comience a desplazarse, evitando la falla percibida. Además, incluso si todavía falla, tiene el inicio táctil y la ubicación actual del toque. A partir de estos, si registra la posición de desplazamiento inicial de su div, puede desplazar manualmente el div al lugar correcto para contrarrestar que salte a la parte superior si es necesario. Un posible algoritmo podría verse así:
// Touchstart handler if (scrollState === ScrollState.Default) { // Record position and id of touch touchStart = touch.location touchStartId = touch.id. scrollState = ScrollState.Touching // If you have to manually scroll the div, first store its starting scroll position: containerTop = $('.myContainer').scrollTop(); containerLeft = $('.myContainer').scrollLeft(); } // Touchmove handler - If the user has dragged beyond a distance threshold, // do the css classes swap. if (touch.id === touchStartId && distance(touchStart, touch.location > threshold) { scrollState = ScrollState.Scrolling; swapCssClasses(); // If you have to manually scroll the div to prevent jump: $('.myContainer').scrollTop(containerTop + (touch.location.y - touchStart.y)); // Do the same for horizontal scroll. } // Then, listen for debounced scroll events, like you're already doing, // to reset your state back to default.Segunda idea: en su controlador de desplazamiento, en lugar de cambiar las clases CSS, establezca la posición de desplazamiento del div directamente para el eje que desea bloquear. IE, si se está desplazando horizontalmente, siempre establezca scrollTop en su valor inicial. Esto también podría cancelar el desplazamiento, no estoy seguro. Habría que probarlo para ver si funciona.
Hay numerosas maneras de tratar de resolver esto. Algunas buenas ideas se ofrecen aquí.
Sin embargo, como han aludido otros, confiar en (o tratar de evitar) el desplazamiento multidimensional es un mal olor de UX, lo que indica que la UX es un problema. No creo que este sea un problema de desarrollo legítimo. Sería mejor dar un paso atrás y reevaluar lo que está tratando de lograr. Uno de los problemas podría ser que, en un esfuerzo por hacer que la interfaz de usuario sea más útil, confundirá a los usuarios. La usabilidad descrita aquí probablemente causaría confusión.
¿Por qué no puedo desplazarme horizontalmente?
¿Por qué cuando dejo de desplazarme verticalmente, solo entonces puedo desplazarme horizontalmente?
Estas son algunas preguntas que se pueden hacer (inaudible).
Si está tratando de permitir que la información adicional de la lista de datos verticales sea navegable solo cuando el usuario haya seleccionado la fila, probablemente sería mucho mejor simplemente tener una lista plana por defecto solo desplazable verticalmente y solo alternar la vertical información cuando la "fila" ha sido seleccionada/activada. Colapsar los detalles lo llevaría de vuelta a la lista vertical plana.
Si tiene que saltar aros para resolver un desafío técnico tan marginal, es una buena indicación de que, para empezar, la experiencia del usuario no ha sido bien diseñada.
esto parece divertido ;)
No discutiré si es razonable.
Lo probé con RxJS:
ngAfterViewInit() { const table = document.getElementById("table"); const touchstart$ = fromEvent(table, "touchstart"); const touchmove$ = fromEvent(table, "touchmove"); const touchend$ = fromEvent(table, "touchend"); touchstart$ .pipe( switchMapTo( touchmove$.pipe( // tap(console.log), map((e: TouchEvent) => ({ x: e.touches[0].clientX, y: e.touches[0].clientY })), bufferCount(4), map(calculateDirection), tap(direction => this.setScrollingStyles(direction)), takeUntil(touchend$) ) ) ) .subscribe(); } Guardamos cada cuarto evento touchemove y luego hacemos un cálculo altamente sofisticado con las coordenadas de los cuatro eventos ( map(calculateDirection) ) que genera RIGHT , LEFT , UP o DOWN y en base a eso trato de deshabilitar el desplazamiento vertical u horizontal. En mi teléfono Android en Chrome funciona;)
Creé un pequeño patio de recreo , que podría mejorarse, reescribirse, lo que sea...
Saludos Chris
Prueba esto
HTML <div class="cu-dashboard-table__scroll-vertical" > <div class="cu-dashboard-table__scroll-horizontal" > <!-- Scroll content here --> </div> </div> CSS &__scroll { &-horizontal { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; } &-vertical { overflow-y: auto; height: 100%; -webkit-overflow-scrolling: touch; } }En lugar de usar un div para desplazarse, ¿por qué no usa dos? Tener uno para X y otro para Y
Necesidad de utilizar tres contenedores.
En el primer contenedor habilito el desplazamiento vertical y no permito el horizontal.
En el segundo, viceversa, habilito el desplazamiento horizontal y no permito el vertical. Asegúrese de usar overflow-x: hidden; y overflow-y: hidden; , de lo contrario, los contenedores secundarios pueden ir más allá del contenedor actual.
También es necesario usar min-width: 100%; min-height: 100%; .
Para el tercer contenedor necesitamos usar display: inline-block; y luego el contenido interno extenderá este contenedor y las barras de desplazamiento correspondientes aparecerán en los dos bloques principales.
HTML
<div class="scroll-y"> <div class="scroll-x"> <div class="content-container"> <!-- scrollable content here --> </div> </div> </div>CSS
.scroll-y { position: absolute; overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; min-width: 100%; min-height: 100%; } .scroll-x { overflow-y: hidden; overflow-x: auto; width: auto; min-width: 100%; min-height: 100%; } .content-container { min-width: 100%; min-height: 100%; display: inline-block; }Puedes probarlo aquí en Safari en iPhone.
¡¡Buena suerte!! 😉