Question

我有一个简单的自定义分割器，效果很好。但是，我有一点问题：

第一次我向下拖动分割器会添加空格，之后我可以随意拖动它（向上或向下）。谁能告诉我可能造成额外空间问题的原因？非常感谢提前！

以下是代码：

@HostListener('document:mousemove', ['$event'])
 onMouseMove(event: MouseEvent) {

if (!this.grabber) {
  return;
}

this.resizer(event.clientY - this.oldY);
this.oldY = event.clientY;
}

Answer 1

首先，您应该考虑使用clientHeight代替offsetHeight，因为CSS高度为calculated，因为clientHeight减去CSS填充*，而offsetHeight还包括边框高度

clientHeight = content height + paddings

offsetHeight = clientHeight + borders height

现在你有两个选择

1）将clientHeight与box-sizing: border-box;一起使用（填充将包含在css高度中）

<强> TS

ngOnInit() {
  this.height = parseInt(this.el.nativeElement.parentNode.clientHeight);
}

<强> CSS

.textarea {
  box-sizing: border-box;
}

<强> Example

2）使用内容高度

ngOnInit() {
  const elem = this.el.nativeElement.parentNode;
  const computedStyle = getComputedStyle(elem);
  const paddingsHeight = parseFloat(computedStyle.paddingTop)
                                          + parseFloat(computedStyle.paddingBottom)
  this.height = parseFloat(elem.clientHeight) - paddingsHeight;
}

<强> Example

拖动它时空的空间

1 个答案: