javascript - Angular 2 window.scrollTo 不工作？

Question

我正在尝试让我的 div 元素设置为“overflow:auto”，以便在用户拖动元素时滚动。

拖动元素有效，检索正确的鼠标数据(例如初始拖动时的 x/y 位置 (onDragStart) 以及鼠标移动时的当前 x/y 位置)也有效。

我意识到我的滚动逻辑可能已关闭，但我只是想让 div 元素完全滚动。任何关于错误的见解将不胜感激......也正在使用 Material 设计。

注意:我正在使用 ng-metadata，它将 Angular 1 移植为看起来像 Angular 2，实际上任何关于 Angular 1 或 Angular 2 的指导都会有所帮助。

@autobind
onDragStart({clientX, clientY}) {
  this.initY = clientY;
  if (this.isDragging) return;
  document.addEventListener('mousemove', this.dragListener = (e) => {
  e.preventDefault();
  if (Math.max(Math.abs(e.clientX - clientX), Math.abs(e.clientY - clientY)) > 3) {
    document.removeEventListener('mousemove', this.dragListener);
    document.addEventListener('mousemove', this.onDrag);
    this.dragListener = this.onDrag;
    this.fileService.dragSource = this.file;
    // onDrag needs to be called before Angular can set the proper classes
    this._element.toggleClass('dragging', this.isDragging);
    this._element.toggleClass('bulk-dragging', this.inBulkDragOp);
    this.onDragScroll(e);
    this.onDrag(e);
    this.drag.emit();
    this._scope.$applyAsync();
  }
});
}

@autobind
onDrag(e) {
  console.log("Dragging...");
  console.log(e);
  var currentY = e.clientY;
  var range = 100; // Range of 100px before scrolling begins... May need tweaking if too responsive

if (currentY > this.initY + range) {
  console.log("SCROLL DOWN");
  window.scrollTo(0, 500);
} else if (currentY < this.initY - range) {
  console.log("SCROLL UP");
}
e.preventDefault();
this._element.css('transform', `translate(${e.clientX - this._element[0].clientWidth / 2}px, ${e.clientY - this._element[0].clientHeight / 2}px)`);
}

Answer 1

我将我的容器标签设置为 100% 的高度，这似乎破坏了滚动的功能。删除它可以解决问题。