Navigating a table list in React using arrow keys without inadvertently scrolling the scrollbar

Currently, I've created a table component that contains a list of items. I've implemented hotkeys using the react-hotkeys package to allow users to navigate through the list using the 'arrow up' and 'arrow down' keys. The issue I'm facing is that whenever I use the hotkeys, the screen also scrolls due to the presence of a scroll bar on the right side. I'm looking for a solution that will allow me to navigate through items with the hotkeys without triggering the scrollbar unless the item is located outside of the current screen. Any suggestions on how to achieve this?

javascripthtmlcssreactjs

Answer №1

If you want to stop the default scrolling behavior in the browser when the user presses the arrow keys, it can be easily achieved by listening for the keydown event. This informative source provides a step-by-step guide on how to accomplish this.

To customize this behavior based on whether a table is currently visible on the screen or not, you can incorporate a simple check within the event listener.

const table = document.querySelector('#table-id')

window.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
        const y = table.getBoundingClientRect().y
        if (y > 0 && y < window.innerHeight) { // Table is within the viewport.
            e.preventDefault();
        }
    }
}, false);

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

Is it possible to execute a function once an element has finished loading?

I am facing a challenge with running the List_Sandbox functions after a specific each loop. This loop selects checkboxes that trigger a change event, rendering additional checkboxes that need to be selected. The issue arises when the List_Sandbox functio ...

javascriptjquery

Tips for breaking up array elements across multiple "tr" tags

In this particular example, I have a Fiddle set up with multiple tr elements displayed within an ng-repeat. My goal is to have three td elements per row. Would it be necessary to use an inner angularjs ng-repeat and split the iconDets array for this purpos ...

javascriptjqueryangularjs

Sharing the current page URL in Expo React Native can be easily achieved by utilizing the built

As I work on developing a React Native mobile app through expo, my aim is to enable users to share their current location with friends on platforms like WhatsApp, Facebook, and Instagram. This functionality would allow recipients of the shared message or ...

reactjsreact-nativeexpo

What could be the reason behind getting a useLayoutEffect error when using renderToString to render a Material-UI component?

Currently, I am utilizing React version 16.12.0 along with @MaterialUI/core version 4.8.1. The challenge I am facing involves creating a custom icon for a React Leaflet Marker. The icon in question is a Fab component sourced from Material-UI. In order to ...

javascriptreactjsmaterial-uireact-leaflet

Transform a Mobx observable map into a JavaScript array

I am working with a component that receives the value of "form.$('userProfile').fields" as a prop, which is an observable map. The structure of this map can be seen in the console.log screenshot below: class Location extends React.Component<* ...

javascriptreactjsmobx

When render returns another component, React does not invoke componentWillMount

Here is my code setup: const Dashboard = React.createClass({ getInitialState(){ return { user: JSON.parse(localStorage.getItem('user')) }; }, componentWillMount(){ var self = this; $.get({ url: 'http://127 ...

javascriptreactjs

What is the best way to swap out text for an image in CSS?

I came across a website that I am working on: The site features a slider with 2 tabs named "TAB1" and "tab2" My goal is to replace the text with unique images for each tab Below is the CSS code snippet: .dnd-tabs.dnd-tabs-style1 .ui-tabs-nav li.ui-tabs ...

htmlcss

Why is my CSS causing a div with 100% width to be slightly taller than expected?

I am working on a website that I want to adjust to the width of different browsers. Everything seems to be functioning properly, except for the fact that the parent div containing the 100% width divs always appears around 5 pixels too tall. This is causin ...

csshtmlwidth

Using WEBGL to Showcase Your Images: A Step-by-Step Guide

I'm hoping to effortlessly showcase an image on the canvas at specific x and y co-ordinates using WEBGL, but I'm unsure of the process. Must shaders be included along with all other technical details? I've come across code snippets for displ ...

javascriptwebgl

Exploring the depths of Vue.js routing through nesting

My Current Route is function route(path, view) { return { path: path, meta: meta[path], component: resolve => import(`pages/${view}View.vue`).then(resolve) } } route('/', 'Home'), route('/help', 'Help ...

javascriptvue.jsvue-routernested-routes

developed a regular expression to disregard .goutputstream documents

After successfully creating a watcher with chokidar, I encountered an issue when trying to ignore certain files using regex. I am struggling to figure out what went wrong in my code or regex implementation. Below is the snippet of the code: const watcher ...

javascriptnode.jsregex

jQuery toggle functioning in one scenario, but failing in another

My experience with JS/Jquery is limited which might explain why I'm struggling with this. I am attempting to hide some text on a page and then make it visible again by clicking on a toggle link. The JavaScript code below is what I have been using. The ...

javascriptjqueryhtml

Adjust the height of Revolution Slider on mobile devices using initialization

To see an example of the Revolution Slider, please check out the top hero section on this page. If you are looking for the initialization code, you can find it in this javascript file: function dz_rev_slider_5(){ if(dzQuery("#rev_slider_11_1" ...

javascriptjqueryjquery-pluginscarouselrevolution-slider

insert <asp:linkbutton> dynamically

I have a question regarding ASP: I am receiving a list of IDs from the server on my webpage. Can I display this list in a div below an ASP.NET control? div_containing_link += "" If not, is there another way to achieve this? For example, I want to displ ...

javascriptasp.net

What is the method of using "*" as the value for allowedModules in a jsreport configuration file to enable all modules?

I am having an issue when trying to generate a report using jsreport STUDIO. The error message I received is as follows: An error occurred - Error during rendering report: Unsupported module in scripts: request. To enable require on a particular module, ...

javascriptnode.jsnpmreportjsreport

Aligning the 'container-fluid' slideshow and video player

I'm struggling to center a video in a slick slider that is set as a 'container-fluid'. The slideshow and video display fine across the full width of the browser, but when I resize the browser window or view the site on a lower resolution, I ...

javascriptjquerycsstwitter-bootstraphtml5-video

The Vue production build displays a blank page despite all assets being successfully loaded

After running npm run build, I noticed that my vue production build was displaying a blank page with the styled background color from my CSS applied. Looking at the page source, I saw that the JS code was loading correctly but the content inside my app d ...

javascriptvue.js

The background color of the columns is overwhelming

I would like to create a TV remote control design using bootstrap, but I am encountering some issues. The background color is overflowing and I'm unsure how to fix it. Please take a look at the code and feel free to offer any suggestions! @media scre ...

htmlcsstwitter-bootstrap

Correctly define the vm function within the Controller As scope

I am a newcomer to javascript and AngularJS. So... Maybe it's a simple question, but I've noticed two ways to define functions in javascript. In the following controllers, pay attention to "grupoCancha" and "grupoVisible" (I included the entire ...

javascriptangularjs

Can you please explain the process of implementing server-side rendering with React?

During my work, I utilized Node's express for sever side rendering with React. However, an unexpected error occurred as shown below. ^ SyntaxError: Unexpected token '<' This particular error popped up unexpectedly. I reached ou ...

reactjsnode.jstypescriptserver-side-rendering