Scrolling

Read the current scroll positions from the backend, or scroll a control programmatically from the backend with two frontend events:

• cs_event-scroll_to — scroll a container to a specific pixel position.
• cs_event-scroll_into_view — bring a control into the viewport, wherever the surrounding scroll container currently sits.

Useful for jump-to-top buttons, restoring positions after navigation, or revealing a row after a backend search.

Read the Scroll Position

client->get( )-s_scroll reports the scroll positions of the page and any open dialogs at the moment the event was fired. Each container exposes the id of the scrollable element and its x / y offsets in pixels. main is the page's own scroll container, nest / nest2 are the first and second nested views, and popup / popover are open dialogs.

DATA(scroll) = client->get( )-s_scroll.

DATA(main_y)    = scroll-main-y.       " main page
DATA(nest_y)    = scroll-nest-y.       " first nested view
DATA(nest2_y)   = scroll-nest2-y.      " second nested view
DATA(popup_y)   = scroll-popup-y.      " open popup
DATA(popover_y) = scroll-popover-y.    " open popover

Scroll to a Position

Pass the control id and the vertical position. Optionally also a horizontal position and a scroll behavior (auto, smooth, or instant):

CLASS z2ui5_cl_sample_scrolling DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS z2ui5_cl_sample_scrolling IMPLEMENTATION.
  METHOD z2ui5_if_app~main.

    IF client->check_on_navigated( ).
      DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
          )->ele( n = `View` ns = `mvc`
              )->a( n = `xmlns`     v = `sap.m`
              )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`

              )->ele( `Page`
                  )->a( n = `id` v = `id_page`

                  )->ele( `footer`
                      )->ele( `OverflowToolbar`
                          )->tag( `Button`
                              )->a( n = `text`  v = `Top`
                              )->a( n = `press` v = client->_event( `SCROLL_TOP` )
                          )->tag( `Button`
                              )->a( n = `text`  v = `Bottom`
                              )->a( n = `press` v = client->_event( `SCROLL_BOTTOM` ) ).

      client->view_display( view->stringify( ) ).

      RETURN.
    ENDIF.

    CASE client->get( )-event.
      WHEN `SCROLL_TOP`.
        client->follow_up_action( val   = client->cs_event-scroll_to
                        t_arg = VALUE #( ( `id_page` ) ( `0` ) ) ).
      WHEN `SCROLL_BOTTOM`.
        client->follow_up_action( val   = client->cs_event-scroll_to
                        t_arg = VALUE #( ( `id_page` ) ( `99999` ) ) ).
    ENDCASE.

  ENDMETHOD.
ENDCLASS.

The arguments for scroll_to are id, scrollTop (y, px), scrollLeft (x, px, optional), and behavior (optional):

client->follow_up_action( val   = client->cs_event-scroll_to
                t_arg = VALUE #( ( `id_page` ) ( `500` ) ( `0` ) ( `smooth` ) ) ).

Scroll an Element into View

To reveal a specific control — e.g. a row after a search — use scroll_into_view with the target control's id:

client->follow_up_action( val   = client->cs_event-scroll_into_view
                t_arg = VALUE #( ( `id_row_42` ) ) ).

Additional optional arguments mirror the browser's scrollIntoView options: behavior (smooth | auto | instant), block (start | center | end | nearest), inline (nearest | start | center | end):

client->follow_up_action( val   = client->cs_event-scroll_into_view
                t_arg = VALUE #( ( `id_row_42` ) ( `smooth` ) ( `center` ) ) ).

Working Samples

Complete apps from the sample catalogue that use what this page describes. Each is a single class — pull the repository with abapGit and start it with ?app_start=<class>.

Sample	Class
Scroll to a Pixel Position (A)	Z2UI5_CL_SMP_APP_362
Scroll a Control into View (A)	Z2UI5_CL_SMP_APP_363