how to scroll a particular item

[Jimmy_Carter]

Hi,

How can the user scroll a particular item with page-up and page-down keys? Is there a way of doing that?

thanks in advance.

[Rex Maughan]

Yes, You can do that with the following code snippet:-

The second .scrollable div (id="b") is focused on page load due to scrollableDiv.focus().

Since this div now has focus, pressing Page Up, Page Down, Arrow keys, etc. will scroll only this specific div instead of the entire page.
The overflow: scroll; CSS ensures that users can manually scroll within both divs.

<!-- language: lang-js -->

The JavaScript code selects an HTML element with the id="b" (which refers to the second scrollable div in your HTML).
It then sets the focus on that div, meaning that any keyboard events like Page Up, Page Down, Arrow keys, etc. will apply directly to that div.

const scrollableDiv = document.getElementById("b");

scrollableDiv.focus();

• Normally, a div element is not focusable by default. However, in your code, the tabindex="-1" attribute on the div makes it programmatically focusable.
• Setting focus ensures that scrolling actions are applied directly to that specific scrollable div, rather than the entire page.

<!-- language: lang-css -->


.box {

display: flex;

}


.scrollable {

width: 200px;

height: 200px;

overflow: scroll;

border: 1px solid #ccc;

}


.content {

height: 500px;

}


<!-- language: lang-html -->


<div class="box">

<div class="scrollable"><div class="content">a</div></div>

<div class="scrollable" id="b" tabindex="-1"><div class="content">b</div></div>

</div>