在网页中向上滚动并拖动

Question

当我选择了一个div时，我希望向上滚动一个页面，所以目标是拖动一个div并向上移动页面。向下滑动的效果很奇怪。

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

edit

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

---

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

[第一溶液]

将`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);
}
}