Styjun

Employer demanding to see degree after poor code review

Why does not valiant's reduction show NP=RP?

How strong are Wi-Fi signals?

Array Stutter Implementation

Seed ship, unsexed person, cover has golden person attached to ship by umbilical cord

Why doesn't the Earth's acceleration towards the Moon accumulate to push the Earth off its orbit?

What does the view outside my ship traveling at light speed look like?

Plot twist where the antagonist wins

Does revoking a certificate result in revocation of its key?

Placing bypass capacitors after VCC reaches the IC

Would Brexit have gone ahead by now if Gina Miller had not forced the Government to involve Parliament?

In general, would I need to season a meat when making a sauce?

How can I get exact maximal value of this expression?

Crossing US border with music files I'm legally allowed to possess

What are the benefits of cryosleep?

Why is this Simple Puzzle impossible to solve?

Would the Geas spell work in a dead magic zone once you enter it?

Where did Wilson state that the US would have to force access to markets with violence?

What's the Difference between Two Single-Quotes and One Double-Quote?

Binary Search in C++17

Is healing by fire possible?

How many chess players are over 2500 Elo?

Why do airplanes use an axial flow jet engine instead of a more compact centrifugal jet engine?

How bitcoin nodes update UTXO set when their latests blocks are replaced?

Choppy scrolling with absolute positioned elements in React

How do I detect a click outside an element?How do I check if an element is hidden in jQuery?Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?How to center absolutely positioned element in div?How do I remove a particular element from an array in JavaScript?jQuery scroll to elementHow to center a “position: absolute” elementLoop inside React JSX

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I have many absolute-positioned elements inside an absolute-positioned parent element. I want to have direct control over the scrolling using the onWheel event in React. The problem is, when I have too many elements, the scrolling becomes choppy. If, rather than controlling the scrolling manually with onWheel, I leave it to the browser, the scrolling is as smooth as butter.

Here is a code sandbox so you can see what I mean. Scroll anywhere in the righthand window to see the choppiness. If you go to the bottom of the code, and change the line ReactDOM.render(<ManualScroll />, rootElement); to ReactDOM.render(<DefaultScroll />, rootElement); the choppiness disappears. If you're on Mac, you may need to disable the "swipe between pages" trackpad setting in system settings.

https://codesandbox.io/s/nnnz3nr27l

How can I achieve this level of smoothness while retaining direct control over the scrolling?

Here's what I've tried:

• Using translate3d rather than translate, both on the graph class and the node class


• Debouncing the onWheel event


• Using window.requestAnimationFrame to update the positions, rather than doing it directly in the onWheel handler

javascript html css reactjs

share|improve this question

asked Mar 24 at 7:10

CaptainStiggzCaptainStiggz

77831332

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Maybe you're debouncing too long or perhaps waiting until the next frame is waiting too long?
  
  – ChrisBrownie55
  Mar 24 at 7:14
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Actually, I think it's just that you're manipulating (and rerendering) 5,000 elements on every scroll. You should definitely be using something like the canvas api for this
  
  – ChrisBrownie55
  Mar 24 at 7:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  My guess would be 5000 elements as well. Changing the value to 500 will make it smooth. Another way of doing this is to just move the 100 elemnts that are to the left and 100 elements that are to the right of the screen. While keeping another 4800 stationary until they are needed. Then swspping the outermost element with the stationary.
  
  – Andrii Rudavko
  Mar 24 at 8:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah, doing some trickery to only move the elements that are on-screen or close to being on-screen was my next idea. Is this how browsers achieve the desired level of smoothness? I.e., when I set overflow: auto on the parent element?
  
  – CaptainStiggz
  Mar 24 at 20:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ChrisBrownie55 I'd love to use canvas, but these elements will actually contain a bunch of regular html - text, images, etc. There won't really be 5,000 individual elements, but there could be 5,000 elements when all the children's children are accounted for. The simple shapes are just to illustrate the issue.
  
  – CaptainStiggz
  Mar 24 at 20:38
  

  
  
  
  

add a comment | 

0

I have many absolute-positioned elements inside an absolute-positioned parent element. I want to have direct control over the scrolling using the onWheel event in React. The problem is, when I have too many elements, the scrolling becomes choppy. If, rather than controlling the scrolling manually with onWheel, I leave it to the browser, the scrolling is as smooth as butter.

Here is a code sandbox so you can see what I mean. Scroll anywhere in the righthand window to see the choppiness. If you go to the bottom of the code, and change the line ReactDOM.render(<ManualScroll />, rootElement); to ReactDOM.render(<DefaultScroll />, rootElement); the choppiness disappears. If you're on Mac, you may need to disable the "swipe between pages" trackpad setting in system settings.

https://codesandbox.io/s/nnnz3nr27l

How can I achieve this level of smoothness while retaining direct control over the scrolling?

Here's what I've tried:

• Using translate3d rather than translate, both on the graph class and the node class


• Debouncing the onWheel event


• Using window.requestAnimationFrame to update the positions, rather than doing it directly in the onWheel handler

javascript html css reactjs

share|improve this question

asked Mar 24 at 7:10

CaptainStiggzCaptainStiggz

77831332

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Maybe you're debouncing too long or perhaps waiting until the next frame is waiting too long?
  
  – ChrisBrownie55
  Mar 24 at 7:14
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Actually, I think it's just that you're manipulating (and rerendering) 5,000 elements on every scroll. You should definitely be using something like the canvas api for this
  
  – ChrisBrownie55
  Mar 24 at 7:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  My guess would be 5000 elements as well. Changing the value to 500 will make it smooth. Another way of doing this is to just move the 100 elemnts that are to the left and 100 elements that are to the right of the screen. While keeping another 4800 stationary until they are needed. Then swspping the outermost element with the stationary.
  
  – Andrii Rudavko
  Mar 24 at 8:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yeah, doing some trickery to only move the elements that are on-screen or close to being on-screen was my next idea. Is this how browsers achieve the desired level of smoothness? I.e., when I set overflow: auto on the parent element?
  
  – CaptainStiggz
  Mar 24 at 20:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ChrisBrownie55 I'd love to use canvas, but these elements will actually contain a bunch of regular html - text, images, etc. There won't really be 5,000 individual elements, but there could be 5,000 elements when all the children's children are accounted for. The simple shapes are just to illustrate the issue.
  
  – CaptainStiggz
  Mar 24 at 20:38
  

  
  
  
  

add a comment | 

I have many absolute-positioned elements inside an absolute-positioned parent element. I want to have direct control over the scrolling using the onWheel event in React. The problem is, when I have too many elements, the scrolling becomes choppy. If, rather than controlling the scrolling manually with onWheel, I leave it to the browser, the scrolling is as smooth as butter.

Here is a code sandbox so you can see what I mean. Scroll anywhere in the righthand window to see the choppiness. If you go to the bottom of the code, and change the line ReactDOM.render(<ManualScroll />, rootElement); to ReactDOM.render(<DefaultScroll />, rootElement); the choppiness disappears. If you're on Mac, you may need to disable the "swipe between pages" trackpad setting in system settings.

https://codesandbox.io/s/nnnz3nr27l

How can I achieve this level of smoothness while retaining direct control over the scrolling?

Here's what I've tried:

• Using translate3d rather than translate, both on the graph class and the node class


• Debouncing the onWheel event


• Using window.requestAnimationFrame to update the positions, rather than doing it directly in the onWheel handler

javascript html css reactjs

share|improve this question

asked Mar 24 at 7:10

CaptainStiggzCaptainStiggz

77831332

share|improve this question

asked Mar 24 at 7:10

CaptainStiggzCaptainStiggz

77831332

share|improve this question

asked Mar 24 at 7:10

CaptainStiggzCaptainStiggz

77831332

asked Mar 24 at 7:10

CaptainStiggzCaptainStiggz

77831332

asked Mar 24 at 7:10

CaptainStiggzCaptainStiggz

77831332