0
379
Vistashow to show one more item from top or bottom of visible area with scrollIntoView()?
I want to show two items when using scrollIntoView() with navigating buttons (up and down) to let the user know there are items to navigate, but the first and last items should have default behavior, So the user knows it is end of list.
I hope this image helps:
here is my code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.myList{
width: 100px;
height: 100px;
margin: 5px;
overflow: scroll;
display: flex;
flex-direction: column;
background-color: gray;
list-style: none;
}
button{
width: 40px;
margin: 0 5px;
}
.myList>*{
display: block;
padding: 5px;
}
.focused{
background-color: yellow;
color: black;
}<html>
<body>
<ul class="myList">
<li data-nav="0">Item 1</li>
<li data-nav="1">Item 2</li>
<li data-nav="2">Item 3</li>
<li data-nav="3">Item 4</li>
<li data-nav="4">Item 5</li>
<li data-nav="5">Item 6</li>
<li data-nav="6">Item 7</li>
</ul>
<button onclick="move(true)">UP</button>
<button onclick="move(false)">down</button>
<script>
let nav = document.querySelectorAll("[data-nav]");
nav.forEach(el=>{
el.classList.remove("focused");
})
nav[0].classList.add("focused");
let focusedIndex = 0;
function move(dir){
if(dir && focusedIndex > 0) focusedIndex--;
else if(!dir && focusedIndex < 6) focusedIndex++;
nav.forEach(elem =>{
elem.classList.remove("focused");
})
nav[focusedIndex].classList.add("focused");
nav[focusedIndex].scrollIntoView(true);
}
</script>
</body>
</html>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
First you need when appear the previous element
- if we click in up button and the current index not the first element, in this statue we need to scroll to previous element and add focused class to current element
let nav = document.querySelectorAll("[data-nav]");
nav.forEach((el) => {
el.classList.remove("focused");
});
nav[0].classList.add("focused");
let focusedIndex = 0;
function move(dir) {
if (dir && focusedIndex > 0) focusedIndex--;
else if (!dir && focusedIndex < 6) focusedIndex++;
nav.forEach((elem) => {
elem.classList.remove("focused");
});
/*
check if we click in up button and will not arrive to last one
[1] add foucs to current index
[2] scroll to prev current index
*/
if(dir && nav[focusedIndex].dataset.nav != 0) {
nav[focusedIndex].classList.add("focused");
nav[focusedIndex-1].scrollIntoView(true);
}
/*
if we click in down button dont do any thing differnt because we already can see
another items or the first condition return flase because this already the
first element
*/
else {
nav[focusedIndex].classList.add("focused");
nav[focusedIndex].scrollIntoView(true);
}
}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta