The scrolling function halts as soon as the element that was middle-clicked is deleted from the

I am knee-deep in developing my own React virtualization feature and encountering a minor annoyance. When I middle click on an item in the list and start scrolling, the scrolling stops once that item is removed from the DOM. My initial thought was that the element was gaining focus causing the issue, but my attempts to prevent this have not been successful, and I'm unsure if that's even the underlying problem.

How can I resolve this issue?

Take a look at this fiddle for a simple demonstration:

https://jsfiddle.net/v169xkym/2/

Here is the relevant portion of code responsible for virtualization:

$('#container').scroll(function(e) {
  $('#container').children().each(function(i) {
     if ($('.item:eq(' + i + ')').length > 0) {
        if ($('.item:eq(' + i + ')').offset().top < 0) {
          $('.item:eq(' + i + ')').remove();
          $('#topPadding').height($('#topPadding').height() + 45);
        }
     }
  });
});

Essentially, I am following the standard approach of removing the element and adjusting the padding. In my React setup, this process is handled differently, but here you have a basic functional example.

Answer №1

To avoid the issue of the disappearing element registering mouse events, you can utilize CSS3:

div.item {
    pointer-events : none;
}

(It is possible that when the element vanishes, the browser no longer recognizes the origin of the event, causing it to cease its intended actions.)

Check out this Jsfiddle example

Answer №2

It may seem like I'm arriving late to the party, but I've come up with a workaround for handling scrolling events on a virtual scroller. By detecting when there is a scroll event and no new events for a certain amount of time, I consider the scroll to be complete.

let scrollTimer = null;
let isScrolling = false;

window.addEventListener('scroll', function() {
  clearTimeout(scrollTimer);
  isScrolling = true;
  
  scrollTimer = setTimeout(()=> {
    isScrolling = false;
  }, 500);
}, false);

Once isScrolling becomes true, I capture the element being hovered over (using mouseOver) and ensure that this element is not unloaded until isScrolling returns to false. It's a bit of a balancing act, but it gets the job done. Hopefully, a simpler solution will surface soon since this issue seems to be specific to Chrome only.

Update: This appears to be a known bug related to pointer-events: none when overlaying a virtual scroller (as demonstrated here). Although I don't fully understand why my workaround works, it's comforting to know that it won't be necessary once Chrome 103 rolls out. Details about the bug can be found here.

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

CSS cascading not happening

Within the usersettings.css.erb file, line numbers are provided for easier reference. 11 #userSettingMain .form-horizontal .controls { 12 13 margin-left: 30px; 14 } 15 16 #user_birthday_3i{ 17 18 margin-left: 0px; 19 } U ...

Please ensure that all files have finished downloading before proceeding to create the object

Within my Session class, I've been instantiating objects from my Question Class. Within this process, images are being downloaded to a local path. However, the issue arises when my LaTeXDoc class demands that all images are already saved at the time o ...

What is the process for using javascript to upload multiple files?

I currently have 5 files uploaded here, https://i.sstatic.net/ebiPu.png. I am attempting to send them to the database after converting them to base64. The issue arises when I try to link them to the attachment_id. https://i.sstatic.net/jymya.png ...

Tips for choosing every <div> within a specific class

I'm trying to create multiple boxes within a class, all with the same background color. I've written code for 6 boxes in the "color-board" class, but when I go to select them, only 1 box is displaying... Below is the code for the class and how I ...

How come ng-class doesn't apply to a specific class name?

I recently wrote the following code: <style> .dotted { border:dotted; } </style> .... <p ng-style="mystyle" ng-class="dotted">{{ answer }}</p> My intention was to have the paragraph element enclosed within a ...

Is it possible to modify the background color of a checkbox?

I am looking to modify the background color of the checkbox itself, specifically the white square. I have spent a lot of time researching this topic but most articles suggest creating a div and changing its background color, which does not affect the whi ...

My JSON request seems to be malfunctioning and I can't figure out why

I've generated a URL that I need to forward to the police data API. var api_url="http://policeapi2.rkh.co.uk/api/locate-neighbourhood?q="+latlon; document.write(api_url); The URL functions correctly when manually entered into a browser, but I requir ...

Convert the provided text into a clickable button

I've been attempting to mirror this function: and: I'm currently utilizing JS and Vue to develop my web application. Any advice on navigating through the current dilemma I find myself in would be greatly appreciated. So far, I have successfully ...

issue concerning slide functionality and ajax integration

I'm facing an issue with the structure of my HTML. Here is the setup I have: <div id ="slide1"> <form method="post" id="customForm" action=""> //my content - name, email, mypassword, pass2 </for ...

Deeply nested .map function to update state value

The current state value const [settings, setSettings] = useContext(SettingsContext) Utilizing the .map method on the settings state {settings[categoryIndex]?.config?.map((item: ConfigItem, index: number) => ...

Listen for events in a child process in NodeJS

I am currently utilizing the node child_process API https://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options var child = child_process.spawn(cmd, val, options); Within the child process, I make use of the followin ...

Guidelines for pinpointing local directories

Recently, I obtained a source code for a website navigation that includes a unique set of icons known as "Typicon." The HTML in the source code contains the following: <link rel="stylesheet" type="text/css" href="css/component.css" /> Within the C ...

The website link cannot be seen on Internet Explorer 8, however it is visible on other browsers like Firefox and Chrome

Please verify the following link: The link "Return to login page" is displayed correctly on Firefox, Chrome, etc., but it appears higher on IE8. How can this be fixed? To resolve this issue, you can adjust the CSS for the 'lost_password' div as ...

Determine the total number of hours along with the precise minutes

Could you assist me with calculating minutes? Here is an example: var time_in = '09:15'; var break_out = '12:00'; var break_in = '13:00'; var time_out = '18:00'; var date = '2018-01-31'; var morning = ( ...

jQuery wrapAll issue

I have a repeating group of three divs in my code that I need to wrap together. Here's an example from my HTML: <div class="one" /> <div class="two" /> <div class="three" /> <div class="one" /> <div class="two" /> <d ...

Is it possible for Firebug to display CSS comments? This feature would greatly assist in utilizing SASS

Can Firebug display CSS comments? I'm wondering if it can help with debugging when using line numbers from SASS. I haven't been able to find any information on this feature, so any help would be greatly appreciated. ...

Tips on adjusting the color of a chosen tab using the CSS :target Property, no JavaScript needed!

I am currently attempting to modify the color of the active tab using CSS and the :target property. The issue I am facing is that I am unable to identify the clicked tab when using the :target property. Therefore, I would like the active tab to be visible ...

Unable to display PHP response in a div using AJAX - issue persisting

Hey there! I'm currently working on a project where I want the form submission to load a response into a div without refreshing the page. I've looked at various examples of ajax forms with PHP online, but haven't been able to solve my issue ...

How do I resize an image to fit perfectly within the viewport dimensions?

As a beginner in Bootstrap and CSS, I am working on creating a home screen layout for my website. My goal is to ensure that the image with an intrinsic size of 1920x1080 fits perfectly within the viewport. Currently, part of the image extends off the scree ...

Create a function that adds a new div element with a one-of-a-kind identification when

I am currently developing a web application on www.firstusadata.com/cash_flow_test/. The functionality involves two buttons that add products and vendors dynamically. However, the issue I'm facing is that the appended divs do not have unique IDs, maki ...