angular - Angular 6 Snap-to-Component 指令在 Chrome 中不起作用
问题描述
我制作了一个Snap-to-Component 指令,该指令在 Firefox 中效果很好,但在 Chrome 中效果不佳。勾选可以使用!它应该可以工作,以便在主机父视图框容器内的 mouseup 上,它获取所有子组件空间/位置的中心,计算它们的 x 中线,并滚动到 x 中线最靠近父视图框的组件中线。任何见解都值得赞赏,特别是如果它们与兼容性有关!谢谢你。
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 项目并在本地运行解决了感知到的兼容性问题。一定是stackblitz问题!我会和他们一起放一张错误票。
推荐阅读
- javascript - 如何使用输入类型收音机使用 jquery 为对象设置动画
- node.js - Strapi API 集成 - 经过身份验证的超级管理员无法访问“广告”和“广告/:ID”之外的自定义路由
- python - 如何像 C# 中的 CompareTo() 一样比较 Python 中的整数?
- python - 我无法在 Atom 中运行 python 代码,但可以在视觉工作室中运行它,因为我使用 anconda 3 下载 python
- c++ - 如何将节点保存到数组中
- google-sheets - 接收“SUMIFS 的数组参数大小不同。” 谷歌表格中的错误
- javascript - 访问有序的类属性
- python - 在自定义环境中运行的 Tensorflow C51 示例代码会出现形状错误
- ios - CI - Xcode 12 服务器在集成后不发送电子邮件
- python - python中的portscanner问题