简体   繁体   English

Angular 2 window.scrollTo不起作用?

[英]Angular 2 window.scrollTo not Working?

I am trying to have it so a my div element, set to "overflow:auto" will scroll when the user is dragging an element. 我正在尝试使用它,以便当用户拖动元素时将设置为“ overflow:auto”的div元素滚动。

Dragging the element works, and so does retrieving the proper mouse data (such as the x/y position upon initial drag (onDragStart) and also the current x/y position when the mouse is moving. 拖动元素有效,并且检索正确的鼠标数据(例如,初始拖动时的x / y位置(onDragStart))以及鼠标移动时的当前x / y位置也是如此。

I realize my logic for the scrolling probably is off, but I am more just trying to get the div element to scroll at all. 我意识到我的滚动逻辑可能已关闭,但我只是想让div元素完全滚动。 Any insight as to what is wrong would be greatly appreciated...Material Design is also being used. 任何关于错误的见解将不胜感激...材料设计也正在被使用。

Note: I am using ng-metadata which ports Angular 1 to look like Angular 2, really any guidance in either Angular 1 or Angular 2 would be helpful. 注意:我使用的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)`);
}

I had my container tag set to a height of 100% which seemed to break the functionality of the scroll. 我将容器标签的高度设置为100%,这似乎破坏了滚动条的功能。 Removing it fixed the problem. 删除它可以解决问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM