Stack Overflow Asked on November 29, 2021
I’m trying to figure out a better way to scroll the images that are farthest to the left and right into view if they are partially out of the parent div when they are clicked.
Would anyone know how I can better detect when they are partially out of view via JS?
If there a better way to go about sliding the available images into view?
Trying to get a suitable method that is not viewport width dependant to work for all the device screens.
const available_images_div = document.getElementById('available-images-div');
available_images_div.addEventListener('click', function(e) {
if (e.target.nodeName == 'IMG') {
const selected_image = e.target;
document.getElementById('active-img').src = selected_image.src;
let added_offset = selected_image.offsetLeft + selected_image.offsetWidth;
let subtracted_offset = selected_image.offsetLeft - selected_image.offsetWidth;
// Check if clicked image is partially or fully it's container's width on the right side
if (added_offset > available_images_div.clientWidth) {
// If the clicked image has an image to the right of it scroll that image into view
if (selected_image.nextElementSibling) selected_image.nextElementSibling.scrollIntoView({
behavior: "smooth"
});
// else scroll the clicked image into view
else selected_image.scrollIntoView({
behavior: "smooth"
});
}
// Check if the container was scrolled and if the clicked image is the one furthest to the left of the containers view port
if (available_images_div.scrollLeft > 0 && subtracted_offset < available_images_div.scrollLeft) {
// If the clicked image has an image to the left of it scroll that image into view
if (selected_image.previousElementSibling) selected_image.previousElementSibling.scrollIntoView({
behavior: "smooth"
});
// else scroll the clicked image into view
else selected_image.scrollIntoView({
behavior: "smooth"
});
}
}
});
#store-img-inner-div {
width: 500px;
}
#store-img-inner-div img {
width: 100%;
height: 100%;
border-radius: 5px;
border: 1px solid #ccc;
}
#available-images-div {
display: flex;
margin-top: 3rem;
overflow-x: hidden;
position: relative;
}
#available-images-div img {
width: 20%;
cursor: pointer;
}
#available-images-div img:not(:last-of-type) {
margin-right: 10px;
}
<div id="store-img-inner-div">
<div id="active-image-div">
<img id="active-img" src="https://source.unsplash.com/U2BI3GMnSSE/1600x900">
</div>
<div id="available-images-div">
<img src="https://source.unsplash.com/U2BI3GMnSSE/1600x900">
<img src="https://source.unsplash.com/wawEfYdpkag/1600x900">
<img src="https://source.unsplash.com/rRiAzFkJPMo/1600x900">
<img src="https://source.unsplash.com/rSpMla5RItA/1600x900">
<img src="https://source.unsplash.com/bIZJRVBLfOM/1600x900">
<img src="https://source.unsplash.com/jM8HUcJtXB0/1600x900">
</div>
</div>
const x = parent.width + parent.left - (target.width + target.left)
if(x > 0) {
console.log("passed");
} else if(x == 0) {
console.log("on line");
} else if( x < 0 ) {
console.log(" no ")
}
getting Element offset and width and height:
Element.offsetLeft || Element.getBoundingClientRect().x
sometimes one of these works if you want you can use jQuery one: ( for top and left )
if ( !elem.getClientRects().length ) {
return { top: 0, left: 0 };
}
// Get document-relative position by adding viewport scroll to viewport-relative gBCR
rect = elem.getBoundingClientRect();
win = elem.ownerDocument.defaultView;
return {
top: rect.top + win.pageYOffset,
left: rect.left + win.pageXOffset
};
Element.getBoundingClientRect().width/height || Element.offsetWidth/offsetHeight
this is up to you to use offset or getBounding
Answered by M.M.F on November 29, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP