Why isn't the window.scrollTo function in Angular 2 working properly?

I am currently working on making a div element, set to "overflow:auto," scroll when a user is dragging an element.

The dragging functionality is functioning correctly, and I am able to retrieve the necessary mouse data, such as the initial x/y position during drag (onDragStart) and the current x/y position while the mouse is in motion.

Although I suspect there may be a flaw in my scrolling logic, my main goal is simply to achieve any form of scrolling within the div element. Any insights into what might be going wrong would be greatly appreciated. Additionally, the project utilizes Material Design.

Please note that ng-metadata is being used to mimic Angular 2 with Angular 1. Any guidance pertaining to either Angular version would be valuable.

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

Answer №1

By setting my container tag to a height of 100%, it accidentally caused the scroll function to malfunction. After removing the height property, everything started working smoothly again.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cease an if condition in AngularJS JavaScript

I am facing a situation where I have an if statement that needs to halt execution but only after certain processes have been completed. This if statement is enclosed within a forEach loop in an Angular context. angular.forEach($scope.obj, function ( val ...

How to access the value of a $scope variable in HTML?

I am a beginner with Angular and I have encountered an issue. I am creating a variable in the Controller JS but I am unable to fetch it in the HTML part. <html ng-app='Demo'> <body> <h2>Select Your Symbol</h2> ...

What is the proper way to initialize MongoDB and Express?

I have a unique app that utilizes express and interacts with mongodb. Here is how I typically kickstart my app: 1. Launch Mongodb mongod --dbpath data --config mongo.conf" 2. Initiate Express node server.js My pondering is, can these processes be comb ...

IntelliJ Community offers comprehensive support for React.js development

Looking for a free React.js plugin with features like syntax highlighting and autocomplete that can be used in IntelliJ Community edition. Considering migrating from Ultimate license to Community edition. Found some answers on stackoverflow but none were ...

How to center align an input vertically with Bootstrap 3

I am having trouble vertically aligning an input in my project. Interestingly, my code works for a span but not for the input! I'm puzzled - what could be the reason behind this? JSFiddle Here is the CSS code snippet: .float { display: table-cel ...

Implementing LDAP authentication with node.js

Looking to implement authentication for my AngularJS app by connecting to my company's LDAP using Node.js to manage user authorization. However, encountering the following error in my current code: binding failed status: 0 result: {"messageID":2,"pro ...

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

Choosing a language - Sending dropdown selection from HTML5 to PHP

Is there a way to store the selected language from an HTML5 dropdown menu into a variable for later use in PHP? Currently, I have hardcoded the initial value of the variable in the code itself. I want to pass the selected language dynamically from HTML t ...

What is the best way to add a constant value to all objects within an array without having to iterate through each one

Is there a more concise way to add a fixed value to each object in an array without using a loop in JavaScript? Programming Language used: JavaScript Example Array: "cars": [ { "name":"Ford", "models":"Fiesta" }, { "name":"BMW", "models":"X1" }, ...

Struggling to forward POST Request using Express and EJS

I'm currently developing an application using Node.js, Express, and EJS. The goal is to have the app redirect users to a different page (for example, from localhost:3000/ to localhost:3000/about) upon clicking a button. Despite successfully receiving ...

How can I effectively search a text file in PHP and display all the results on a webpage?

I've been experimenting with building a webpage that allows users to search through a .txt file using only html and php. Below is the code I have come up with: <?php $file = 'myfile.txt'; if (preg_match_all($pattern, $contents, $matches ...

Unable to display favicon when using the include function

How can I add the favicon link to my website? In my header.php, I have added the link for my ico favicon, but when I try to include it in my index file, the favicon does not show up. I attempted to insert the favicon code directly into the index.php file, ...

What is preventing me from utilizing require in vue-router's routes.js file?

Vue-router typically requires the standard setup as outlined below: In main.js, the routes.js file is required and it usually contains code similar to this: //routes.js import Register from './components/Register' import Login from './comp ...

Exclude items from jQuery UI Sortable that do not fit the specified item selector

In a complex scenario, I have a table with two levels of groupings. The code I'm working with has a table structure with alternating rows labeled either "group" or "member" to display nested groups with their associated members. Below is an example o ...

Uses identification numbers in place of names

I'm a beginner in Django and I'm facing an issue where the ID is displaying instead of the category name. How can I solve this problem? I have attached a part of the code below, which is incomplete. I suspect the issue lies in views.py model.py ...

What is the best way to filter out specific data fields from console.log in JavaScript?

When working with Java, I often use lombok to exclude certain fields from being printed. For instance, the @ToString.Exclude annotation can be used to prevent printing the user token. import lombok.ToString; public class TokenResponse { @ToString.Excl ...

Generating a dynamic row within a table using pdfMake

My JavaScript Array of Objects has the following structure: arr=[[1,2,3],[1,2,4],[3,5,6],[2,4,5]] I'm looking to remove the outer array from this data. The expected output is shown below. With this output, I plan to generate a table in pdfMake. The ...

jQuery for creating single-page websites with horizontal scrolling navigation

I'm attempting to implement a horizontal scrolling section on my webpage. Although this is a basic function that I have successfully executed multiple times in the past, I seem to be overlooking something rather obvious. There seems to be an issue w ...

Converting JSON to Array: A Step-by-Step Guide

Greetings, StackOverflow community! This is my inaugural question here. I believe the answer is not overly complex, but my knowledge of Javascript is quite rudimentary. Currently, I have a JQuery AJAX function that processes this JSON object: { "Users" ...

php - Can you identify the issue?

File Name: sms1.php Located at: Here is the PHP code for sms1.php: <?php //Variables to POST $user = "hidden"; $password = "hidden"; $mobiles = "$_POST[phone]"; $message = "$_POST[msg]"; $sender = "$_POST[sender]"; //Setting up CURL to send data via ...