Scroll up drag in web page
I'm looking to scroll up a page when I have a div selected, so the goal is to drag a div and move the page up. The scoll down works strangely.
Is there a problem with angular or html that would be listed?
(I don't want to use 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>...
Solution 1:
editadding solutions based on our discussion in the comments section
im still not sure if I got your end goal, but I hope I did
[first solution]
add `scrollPositionRestoration: 'enabled'` to `app-routing.module.ts` 's `RouterModule`: RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
[second solution]
try implementing this logic]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() {}
[third solution]
If all fails, then create some empty HTML element (eg: div) at the top (or desired scroll to location) with id="top":<div id="top"></div>
And in component:
ngAfterViewInit() {
// Hack: Scrolls to top of Page after page view initialized
let top = document.getElementById('top');
if (top !== null) {
top.scrollIntoView();
top = null;
}
}
I dont have much to work with regarding how you built your code, but I hope this might solve it (it will make draggable items scroll your screen) :)
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);
}
}