在网页中向上滚动拖动

Question

我希望在选择 div 时向上滚动页面，因此目标是拖动 div 并将页面向上移动。 scoll down 的效果很奇怪。

列出的 angular 或 html 是否有问题？

（我不想使用 Jquery）

 <div class="panel panel-default">
  <div class="panel-body">
    <p class="h4">Commandes</p>
    <div class="row">
      <div class="col-md-12 col-xs-12 text-right" draggable="true">
        <button type="button" (click)="addCommande()" class="btn btn-labeled btn-purple m-l-4">
          <span class="btn-label"><i class="fa fa-plus"></i></span><span class="hidden-xs">Ajouter une commande</span>
        </button>

      </div>
    </div>...

Answer 1

编辑

根据我们在 cmets 部分的讨论添加解决方案

---

我仍然不确定我是否达到了你的最终目标，但我希望我做到了

[第一种解决方案]

将 `scrollPositionRestoration: 'enabled'` 添加到 `app-routing.module.ts` 的 `RouterModule` 中：

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

[第二个解决方案]

尝试实现这个逻辑]

export class ScrollToTopComponent implements OnInit {
  windowScrolled: boolean;
  constructor(@Inject(DOCUMENT) 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() {}

[第三种解决方案]

如果 all 失败，则在顶部（或所需滚动到位置）创建一些空的 HTML 元素（例如：div），id="top"：

<div id="top"></div>

在组件中：

ngAfterViewInit() {
    // Hack: Scrolls to top of Page after page view initialized
    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);
    }
}