在网页中向上滚动拖动。

9 浏览
0 Comments

在网页中向上滚动拖动。

当我选择一个div时，我想要向上滚动页面，所以目标是拖动一个div并向上移动页面。向下滚动的效果很奇怪。\n是否有关于Angular或HTML的问题需要列出来？\n（我不想使用jQuery）\n

    
Commandes
        
    ...

0

1 答案

0 Comments

问题出现的原因：

用户想要实现一个点击元素后页面向上滚动的效果，类似于点击底部链接时页面回到顶部的效果。

解决方法：

以下是几种解决方法：

第一种解决方法：

在`app-routing.module.ts`文件的`RouterModule`中添加`scrollPositionRestoration: 'enabled'`：

RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})

第二种解决方法：

实现以下逻辑：

export class ScrollToTopComponent implements OnInit {
  windowScrolled: boolean;
  constructor(private document: Document) {}
  
  @HostListener("window:scroll", [])
  onWindowScroll() {
      if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
          this.windowScrolled = true;
      } else if (this.windowScrolled && (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) < 10) {
          this.windowScrolled = false;
      }
  }
  
  scrollToTop() {
      (function smoothscroll() {
          var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          if (currentScroll > 0) {
              window.requestAnimationFrame(smoothscroll);
              window.scrollTo(0, currentScroll - (currentScroll / 8));
          }
      })();
  }
  
  ngOnInit() {}
}

第三种解决方法：

如果以上解决方法都无效，则在页面的顶部（或所需滚动到的位置）添加一个空的HTML元素，例如`div`，并设置其id为"top"：

在组件中添加以下代码：

ngAfterViewInit() {
    let top = document.getElementById('top');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }
}

另外，还有一段代码，可以让可拖动的元素在拖动时滚动屏幕：

var stop = true;
document.quertSelector(".draggable").on("drag", function (e) {
    stop = true;
    if (e.originalEvent.clientY < 150) {
        stop = false;
        scroll(-1)
    }
    if (e.originalEvent.clientY > ($(window).height() - 150)) {
        stop = false;
        scroll(1)
    }
});
document.querySelector(".draggable").on("dragend", function (e) {
     stop = true;
});
var scroll = function (step) {
    var scrollY = window.pageYOffset;
    window.pageYOffset(scrollY + step);
    if (!stop) {
        setTimeout(function () { scroll(step) }, 20);
    }
}

以上是根据讨论和提供的解决方案整理的文章，希望能解决问题。

0