-1

My app has so 30 divs.. currently the user can press and it plays a sound and changes color...

However, om auto play the divs that are lower on the screen play but I need it to focus and scroll to that div so the user does not have to.

I see some solutions for a single element using ref but each lesson (page) has X number of divs.

I am using CRA.

Update: I posted the solution as answer. ScrollIntoView is the key but that example was not exactly what I wanted to do I think.

NSL
  • 51
  • 1
  • 8
  • 1
    Can you please briefly explain your Question with some code? – Rishabh Rawat Mar 22 '19 at 16:34
  • are you just looking for `scrollIntoView`? – Wyck Mar 22 '19 at 17:04
  • Ris. So think of the alphabet A to Z in blocks. User clicks on A and I got the sound to play and css changes on click. The user can play the whole lesson ie all the blocks auto. However, later blocks become out of view. I want the code to autofocus those blocks so the user does not have to scroll to that letter... – NSL Mar 22 '19 at 17:20
  • Possible duplicate of [How can I scroll a div to be visible in ReactJS?](https://stackoverflow.com/questions/30495062/how-can-i-scroll-a-div-to-be-visible-in-reactjs) – Chris W. Mar 22 '19 at 18:05
  • I am still trying to understand that code. It seems it MAY be similiar but not sure yet. – NSL Mar 23 '19 at 12:21

1 Answers1

0

Okay so that example was quite complicated for a simple thing..

I found the solution with 2 lines of code.

  1. For each div just add a REF

    ref={ index }

  2. In my app the user pressed one button to listen to A B C D etc.. so as it highlights each letter in that onClick event I had to do the following: (add >> .bind(this <<

    onClick={ () => this.playBlock.bind(this, lessonAudio[index], index ) }

    1. Finally, add this line to my playback...

      this.refs[index].scrollIntoView({ block: 'end', behavior: 'smooth' });

NSL
  • 51
  • 1
  • 8