C2LC-216: Scrolling to the active program step scrolls the whole page, not just the program editor

Metadata

Source
C2LC-216
Type
Bug
Priority
N/A
Status
Done
Resolution
N/A
Assignee
N/A
Reporter
Created
2020-08-19T09:11:49.972-0400
Updated
2020-10-14T10:07:15.694-0400
Versions
N/A
Fixed Versions
  1. Coding Env 0.4
Component
N/A

Description

Scrolling to the active program step scrolls the whole page, not just the program editor. This is particularly visible when using the scene.

To reproduce:

  • Adjust your browser window such that it is possible to view the scene without the program editor
  • Make a program in the program editor
  • Run the program
  • Scroll up to the scene, with the program editor off screen

Expected:

  • The scene remains visible while the program is running

Actual:

  • On the next program step, the page will scroll down to the program editor

We want the program editor to scroll horizontally to show the active program step, but we don't want the page to be scrolled.

We are currently using Element.scrollIntoView(): https://github.com/codelearncreate/c2lc-coding-environment/blob/bf653cc9526e9d8013383f07e8fc5b8689b12ffa/src/ProgramBlockEditor.js#L466

We may be able to change how we are using Element.scrollIntoView() or we may need to switch to another mechanism to scroll, such as calculating the position of the active program step within the editor and using Element.scrollLeft on the program editor scroll container.

Comments

  • Daniel Cho commented 2020-09-02T12:55:14.148-0400

    I found a solution to this issue on this post: https://www.javascripttutorial.net/dom/css/check-if-an-element-is-visible-in-the-viewport/, which is to check if the program sequence container is within the current viewport before autoscroll. Since this is work is planned for the next release, I will just create C2LC-216 branch on my forked repo and won't open a PR yet.

  • Daniel Cho commented 2020-09-21T14:13:37.075-0400

    Sepideh thinks the character on the scene and the program execution should be synced, even when users are not looking at the program area; desired interaction behaviour would be to auto scroll the program area regardless of the current viewport.