I am trying to achieve that on keypress, the page scrolls according to the focused div, at the moment, the keypress scrolls correctly through the divs but what I need to achieve is that the page scrolls with the focused item. At the moment it lags behind. The first few items are fine, but then the focused div goes lower than what is displayed on the page.
Here are the snippets of code that I am using:
This gets the keypress and works correctly on a page that does not need to scroll (less than a screen's worth of content):
<script>
$('.focused').focus();
$(document).keydown(function(e){
if (e.keyCode == 38) { // left
if($('.focused').prev('.focusable').length)
$('.focused').removeClass('focused').prev('.focusable').focus().addClass('focused');
}
if (e.keyCode == 40) { // right
if($('.focused').next('.focusable').length)
$('.focused').removeClass('focused').next('.focusable').focus().addClass('focused');
}
if (e.keyCode == 8) {
window.history.back();
}
});
</script>
And these are the elements (the first one is set as focused the others are not, the keypress cycles through them).
<div class="col-lg-4 col-md-6 focusable focused">
<a href="/items" class="listing-item-container compact">
<div class="listing-item">
<img src=items.jpg">
<div class="listing-item-content">
<h3>' . $content . '</h3>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 focusable">
<a href="/items" class="listing-item-container compact">
<div class="listing-item">
<img src=items.jpg">
<div class="listing-item-content">
<h3>' . $content . '</h3>
</div>
</div>
</a>
</div>
There are a number (up to 20) of divs on each page.
I'm not sure how to make the page scroll down enough to show focused div.
Any help would be appreciated. Thanks.
You can use html!
Choose where you want to scroll. for example a div. Add an id to the div.
<div id="exampleId">
Use an a tag to scroll the div. In the tag href section, write the id of the div you want to wrap using #.
<a href="#exampleId">Scroll Me To The Example Div !</a>
yes now clicking this link will scroll you to the div with id exampleId. You can shape the optional a tag like a button.
use like this
const scrolldown = () => {
const btn = document.querySelector("#sections");
btn.scrollBy({ left: 200, behavior: "smooth" });
}