Angular 6 Snap-to-Component Directive is not working in Chrome

问题

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:

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"});
    }
  }
}

Thanks!

回答1:

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.

来源：https://stackoverflow.com/questions/51312864/angular-6-snap-to-component-directive-is-not-working-in-chrome