React drag and drop feature now comes with autoscroll functionality, making

I am encountering an issue with my nested list Items that are draggable and droppable. When I reach the bottom of the page, I want it to automatically scroll down. Take a look at the screenshot below:

https://i.sstatic.net/ADI2f.png

As shown in the image, there are more items at the bottom but the scrolling is not happening.

Here is the code snippet:

import React, { useState, useEffect, useRef } from "react";
import "../list3.css";

const List5 = () => {
  // Code here
};

// Other functions and components

export default List5;

I have attempted adding CSS properties like `overflow` to the main div. Here is the CSS file:

/* CSS styles */
// Styles here

Your help on this matter is greatly appreciated.

Thank you for your assistance.

Answer №1

If you want to implement bottom scrolling when an object is dragged, follow these steps:

  • Find the y-axis value of the object being dragged.
  • Determine the window's bottom y-axis (you may need to calculate this by combining the window's topY and height).
  • Check if the object's y-axis is within 200 pixels (you can adjust this threshold) from the window's bottom y-axis. If so, scroll the window or parent element by a specified number of pixels. This could be done in the useEffect function of the dragging element - monitor its position and trigger the scroll when it reaches the designated point at the bottom.

This method focuses on scrolling only towards the bottom, which can present more challenges. You may need to devise a similar approach for upward scrolling as well.

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

Are elements loaded and hidden by ng-hide and ng-show, or does loading only occur with ng-show?

Is this method of programming effective for handling large elements such as 10 mb images? Are there alternative solutions that would work better? ...

Dynamically disabling a button in ReactJS

I am a newcomer to ReactJS and I have a requirement to disable the update button if the length of the zip code is less than 5 or zero. However, I am encountering some challenges in implementing this. Here is my current code: let zipCodeButton = true; fun ...

Struggling with getting basic CSS to work with React's MUI framework

I've been attempting to incorporate basic CSS with MUI components. According to their website, it should be feasible. https://material-ui.com/guides/interoperability/#plain-css But unfortunately, I'm having trouble getting it to function prope ...

What is the best way to update setState when triggering an onChange event?

Here is the code snippet for a React component that handles cryptocurrency selection: import React, { Component } from 'react'; import { Select } from 'antd'; import { connect } from "react-redux"; class SelecionarCrypto extends Compo ...

When attempting to execute the "npm run start" command in a ReactJS environment, an error message appeared

'react-scripts' command is not being recognized as a valid internal or external command, able to use program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: react-scripts start npm ERR! Ex ...

Managing the height of a hero section with TailwindCSS and React.js

Embarking on my first website project using React and Tailwind has been an exciting learning experience. My vision is to showcase a Hero Section prominently at the top, with a Nav bar situated elegantly at the bottom of the screen. To bring this concept ...

JavaScript: Filtering an object array pushed from a MySQL query

After retrieving an array from mysql, I encountered a problem while trying to filter out certain objects. var notes = [] db.query('SELECT * FROM test WHERE working = 0') .on('result', function(data){ ...

Retrieving rich text field content from Contentful

I am currently in the process of creating a blog section for my personal website, and after exploring various options, I have decided to go with Contentful as my headless CMS. While I have managed to successfully access certain fields using the following q ...

How to delete an element from a session array using Jquery and Ajax techniques

In my table, each element in an array corresponds to a row. I'm attempting to delete an element when the delete image (with the id deleteRowButton) is clicked. Currently, nothing happens upon clicking the image. However, if I remove the line var index ...

Issues with CSS overlays arise when attempting to display a welcome page on top of a flash component

Can anyone help with fixing the issue of my overlay being hidden behind the flash element? The blue bar with the 'Continue' button still shows up on top. I need some CSS changes to make sure that the overlay appears above everything else below it ...

Tips for avoiding Netlify's error treatment of warnings due to process.env.CI being set to true

Recently, I encountered an issue with deploying new projects on Netlify. After reviewing the logs, I noticed a message that had never appeared during previous successful deployments: The build failed while treating warnings as errors due to process.env.CI ...

Use Jquery to revert the chosen element back to its original base state

I have implemented a select box where selecting a value in the main select box "Domains" will reveal another select box called "Types" such as Diatoms or Flagellates. I have successfully achieved this functionality, but now I am facing an issue with resett ...

Attaching identical class and event handlers to numerous dynamically created elements

I am facing a challenge with the following HTML structure: <a href="#" @click.prevent="toggleClass">Show/Hide</a><br> <li :class="{myClass: showItems}">Item 1</li> <a href="#" @click.prevent="toggleClass">Show/Hide< ...

Is it feasible to display Material components inside a material-table?

Currently, I am in the process of developing a data display feature for my application and have been exploring various data table components that are constructed using Material UI. One question that has arisen is whether it is feasible to incorporate Mater ...

Conceal a division on a webpage according to the URL of the specific

<script> function hideSearchField() { if (/menu/.test(window.location.href)) { document.getElementById('searchfield').style.display = 'none'; } } hideSearchField(); </script> I am trying to accomplish this using Jav ...

Encountered an issue when running the command `npm i`: Detected react@undefined

Encountering an issue with my CRA project while running npm i, resulting in the following error: npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0377666f6c2e766a433b2d2d33">[email protected]< ...

What is the best way to confirm that a specific method was called on a JavaScript object using Selenium?

My goal is to use selenium to verify that a specific method (with parameters) was called on a JavaScript Object, similar to expectation mocking with JMockit but for Javascript and selenium. Unfortunately, the object I am dealing with is a heavily obfuscat ...

Retrieving data from an external API using Express.js and displaying it on a website

I'm facing a challenge in handling a solution with node.js and express.js utilizing pug for rendering HTML. I need to render on a single page by retrieving values from separate HTTP GET requests from different websites. My goal is for express/node to ...

An effective way to verify if a record has been successfully updated is by utilizing Sequelize's

Within this snippet of code, I made an update to a specific record in the IPAdress model. What is the best way for me to verify if the record has been successfully updated or not? let IPAdress = await model.IPAdress.update(data,{ where: { id } }); ...

The ng-repeats functionality is triggered multiple times whenever I attempt to make this call

I have a situation where I am using ng-repeat in my Laravel view to call a function from the controller. This function retrieves data from the database, performs some calculations, and then returns an array. However, I am facing an issue where the data is ...