Text will scroll within a DIV when a key is pressed

Question

Text will scroll within a DIV when a key is pressed

Is there a way to implement a scroll effect on the div using the SPACE key? I would like the first span to move out of sight while the rest become visible when the key is pressed.

HTML

<div class="scroll-div">
  <span class="item1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, beatae.</span>
  <span class="item1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, beatae.</span>
  <span class="item1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, beatae.</span>
  <span class="item1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, beatae.</span>
</div>

CSS

.scroll-div{
  width: 150px;
  height: 100px;
  overflow-y: scroll;
}

JS

const scrollDiv = document.querySelector('.scroll-div');
scrollDiv.addEventListener('keydown', event => {
  if(event.key == ' '){
    ...scroll up;
  }
})

PS: If there's a CSS-only solution for this, I'd prefer that option.

javascript html css keydown

Answer 1

Answer №1

Make sure to include
after each period.

/* Your Updated JavaScript */
<script language="javascript>

// Count the number of elements with the same class name.
var items = document.getElementsByClassName("item1").length;

i=0; // initialize a variable to track the current element.

const scrollDiv = document.querySelector('.scroll-div');
scrollDiv.addEventListener('keydown', event => {
if(event.key == ' ') {

// Scroll to each element on every key press
document.getElementsByClassName("item1")[i].scrollIntoView({behavior: "smooth"});
i++;    // Increment the value of i to move to the next <span>

}
});

</script>

This code should help you resolve your problem 😊

Answer 2

Make sure to include
after each period.

/* Your Updated JavaScript */
<script language="javascript>

// Count the number of elements with the same class name.
var items = document.getElementsByClassName("item1").length;

i=0; // initialize a variable to track the current element.

const scrollDiv = document.querySelector('.scroll-div');
scrollDiv.addEventListener('keydown', event => {
if(event.key == ' ') {

// Scroll to each element on every key press
document.getElementsByClassName("item1")[i].scrollIntoView({behavior: "smooth"});
i++;    // Increment the value of i to move to the next <span>

}
});

</script>

This code should help you resolve your problem 😊

Text will scroll within a DIV when a key is pressed

Answer №1

Similar questions

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

When using ReactDOM.render, make sure to provide a function as the last optional `callback` argument

The issue of Access-Control-Allow-Origin not functioning properly when using Ajax for a POST request

AnimationHandler does not animate the Three.js Mesh

Showing information in <select> depending on the selection of another <select>

How to Align Title in the Center of a Section Containing Multiple Images?

Creating HTML dynamic lists that remain fixed to the bottom of the viewport, regardless of any changes in their content

Creating new form fields dynamically using JavaScript (triggered by onClick event)

Error encountered while compiling ./node_modules/@material-ui/core/ButtonBase/ButtonBase.js

The PHP table fails to show up on the screen

Breaking up the HTML elements assigned to a single controller can render the controller inoperable

Tips for creating a custom axios response depending on the error code returned by the response

No wrapping of columns in Bootstrap 4

Tips for identifying truncated text when resizing the td element

Conceal the scrollbar while navigating within the parent container

When a global variable is defined after a return statement within a function declaration, it does

Issue with form not being validated

AngularJS ng-repeat items do not properly align when utilizing Bootstrap col-md-2 styles

How can I update jQuery CSS method on resize event?

Utilizing Rollup to Bundle a Collection of React Components