Angular 6 Snap-to-Component指令在Chrome中不起作用 [英] Angular 6 Snap-to-Component Directive is not working in Chrome

问题描述

我制定了一个 Snap-to-Component Directive 在Firefox中效果很好但不适用于Chrome。已检查可以使用！它应该可以正常工作，以便在主机父视图框容器中的mouseup上获取所有子组件的空间/位置的中心，计算它们的x中线，并滚动到x-midline最接近父/视图框的组件。中线。任何见解都会受到赞赏，特别是如果它们与兼容性有关！谢谢。

I have made a Snap-to-Component Directive that works great in Firefox but not in Chrome. Checked canIUse! It is supposed to work so that on mouseup within the host parent viewbox container it gets the center of all child components' space/positions, calculates their x-midlines, and scrolls to the component with the x-midline closest to the parent/viewbox midline. Any insights are appreciated especially if they are related to compatibility! Thank you.

windowsnap.directive.ts：

windowsnap.directive.ts:

import {Directive,Input, HostListener, ElementRef} from '@angular/core';

@Directive({
  selector: '[windowsnap]'
})
export class WindowSnapDirective {

  scrollhistory = [];
  parent = this.el.nativeElement;

  constructor(private el: ElementRef) { }

  closest(num, arr) {
    let curr = arr[0];
    arr.forEach( (val)=>{
        if (Math.abs(num - val) < Math.abs(num - curr)){
          curr = val
        } 
    });
    return curr;
  }


 @HostListener('mouseup') onMouseUp(){
    this.scrollhistory.unshift(this.parent.scrollLeft);

    // this is to prevent unnecesary scrolls to the same component
    if(this.parent.scrollLeft === this.scrollhistory[1]){return}

    // logging x-scroll history into an array
    console.log(this.scrollhistory)

    //  child element declarations
    let child1El = this.parent.querySelector('child1');
    let child2El = this.parent.querySelector('child2');
    let child3El = this.parent.querySelector('child3');

    // child1 boundaries
    let child1leftBoundary:number = child1El.offsetLeft;
    let child1middleBoundary: number = child1El.offsetWidth*0.5 + child1leftBoundary ;
    let child1rightBoundary: number = child1El.offsetWidth + child1leftBoundary ;
    console.log('child1 Left: ' + child1leftBoundary +', child1 Middle: ' + child1middleBoundary +  ', child1 Right: ' + child1rightBoundary)

    // child2 boundaries
    let child2leftBoundary:number = child2El.offsetLeft;
    let child2middleBoundary: number = child2El.offsetWidth*0.5 + child2leftBoundary ;
    let child2rightBoundary: number = child2El.offsetWidth + child2leftBoundary ;
    console.log('child2 Left: ' + child2leftBoundary + ', child2 Middle: ' + child2middleBoundary + ', child2 Right: ' + child2rightBoundary)

    // child3 boundaries
    let child3leftBoundary:number = child3El.offsetLeft;
    let child3middleBoundary: number = child3El.offsetWidth*0.5 + child3leftBoundary ;
    let child3rightBoundary: number = child3El.offsetWidth + child3leftBoundary ;
    console.log('child3 Left: ' + child3leftBoundary + ', child3 Middle: ' + child3middleBoundary + ', child3 Right: ' + child3rightBoundary)


    //  x view boundaries
    let viewBoxL = ( this.parent.scrollLeft)
    let viewBoxC = ( this.parent.scrollLeft + (this.parent.offsetWidth*0.5))
    let viewBoxR = ( this.parent.scrollLeft + (this.parent.offsetWidth))
    console.log(viewBoxL);
    console.log( this.parent.scrollLeft + (this.parent.offsetWidth*0.5));
    console.log( this.parent.scrollLeft + (this.parent.offsetWidth));


    //positioning calculations
    let a = (viewBoxC-child1middleBoundary)
    console.log('a:' + a)
    let b = (viewBoxC-child2middleBoundary)
    console.log('b:' + b)
    let c = (viewBoxC-child3middleBoundary)
    console.log('c:' + c)


    // make list of children mid points and get closest number to zero
    let closestChildMid = this.closest(0, [a, b, c])
    console.log("closest: " + closestChildMid)

    //if a highest number scroll to childa
    if(closestChildMid === a){
    child1El.scrollIntoView({behavior: "smooth", block: "center"});
    }
    //if b highest number scroll to childb
    if(closestChildMid === b){
    child2El.scrollIntoView({behavior: "smooth", block: "center"});
    }
    //if c highest number scroll to childc
    if(closestChildMid === c){
    child3El.scrollIntoView({behavior: "smooth", block: "center"});
    }
  }
}

谢谢！

推荐答案

导出stackblitz项目并在本地运行可以解决感知到的兼容性问题。一定是个大问题！我会和他们放一张臭虫票。

Exporting the stackblitz project and running locally solved the perceived compatibility problem. Must be a stackblitz issue! I will put in a bug ticket with them.

这篇关于Angular 6 Snap-to-Component指令在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！