如何使用 JS（或 CSS）在可滚动容器内水平居中图像卡？
[英]How to center image cards horizontally inside scrollable container with JS (or CSS)?
问题描述
I have a horizontally scrollable container with images.
我有一个带有图像的水平滚动容器。 3rd image should be in the center of the container.第三张图片应该在容器的中心。 On tablet and mobiles the images inside the container should be scrollable to right and left.在平板电脑和手机上，容器内的图像应该可以左右滚动。
HERE is the DEMO:这是演示：
Currently on tablet and mobile the block starts with the first image but I need 3rd image to be always in the center (horizontally, not vertically), while keeping the ability to scroll images horizontally.目前在平板电脑和移动设备上，该块从第一张图像开始，但我需要第三张图像始终位于中心（水平，而不是垂直），同时保持水平滚动图像的能力。 Please help请帮忙
The problem is only with screen width under 1300PX.问题仅在于屏幕宽度低于 1300PX。 1300px+ behaviour is correct 1300px+ 的行为是正确的
I guess the problem is with the Javascript.我想问题出在 Javascript 上。 I tried Element.scrollIntoView() but it automatically scrolls to this block (this element is used in the middle of a larger website ), so i can't use it我试过Element.scrollIntoView()但它会自动滚动到这个块（这个元素在一个更大的网站中间使用），所以我不能使用它
the JS code I use to try to center images:我用来尝试居中图像的 JS 代码：
const centeredImage = document.getElementById("center-image");
const scrollableContainer = document.querySelector(".section-more-clients-images-card");
centeredImage.parentNode.scrollLeft = centeredImage.clientWidth / 130;
.section-more-flats-images-card { display: grid; grid-gap: 7px; grid-template-columns: repeat(5, 27%); grid-template-rows: minmax(190px, auto); overflow-x: auto; margin-bottom: 34px; }.image-card { position: relative; max-height: 500px; max-width: 275px; background-color: red; }.image-card img { width: 100%; height: auto; }.image-card:nth-child(3) { margin-top: 31.9%; background-color: green; }.image-card:nth-child(2), .image-card:nth-child(5) { margin-top: 14.41%; }::-webkit-scrollbar { display: none; } @media screen and (min-width: 1019px) {.section-more-flats-images-card { grid-template-columns: repeat(5, 275px); } } @media screen and (min-width: 1300px) {.section-more-flats-images-card { justify-content: flex-start; margin-left: 4.4444%; gap: 20px; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1,0. maximum-scale=1.0"> <title>INGRAD</title> <link href="./resetNew.css" rel="stylesheet" /> <link href="./styleNewMain.css" rel="stylesheet" /> </head> <body> <main class="main"> <.-------------- DIV MORE FLATS IMAGES --------------> <div class="section-more-flats-images-card"> <div class="image-card"> </div> <div class="image-card"> </div> <div class="image-card" id="center-image"> </div> <div class="image-card"> </div> <div class="image-card"> </div> </div> <script src="./script.js" type="text/javascript"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2022-09-09 12:41:00
Please be aware that you have to run the function onload, but on window resize the centered position might be lost .请注意，您必须在加载时运行 function，但在 window 上调整中心 position 可能会丢失。 The reason is that if the gallery width changes, the third image won't be centered anymore.原因是如果画廊宽度发生变化，第三张图片将不再居中。
Also keep in mind that running the below function on window resize might cause the user to lose their scrolled position , but since they might lose it even without the function, I would run it anyways. Also keep in mind that running the below function on window resize might cause the user to lose their scrolled position , but since they might lose it even without the function, I would run it anyways.
Last but not least, running this function directly in the window resize event might cause performance problems since it will run dozens of times depending on how much the user resizes.最后但同样重要的是，直接在 window 调整大小事件中运行此 function 可能会导致性能问题，因为它会根据用户调整大小的程度运行数十次。 So you might want to implement functionality that waits until the resize, but that is out of the scope of this question:)因此，您可能希望实现等到调整大小的功能，但这不在此问题的 scope 范围内:)
function centerThirdImageOfHorizontalGallery() {
const horizontalGallery= document.querySelector('.section-more-flats-images-card');
const imageToCenter= document.querySelector('#center-image');
// Centers the image by setting its parent element's scrollLeft
horizontalGallery.scrollLeft = imageToCenter.offsetLeft - (horizontalGallery.offsetWidth / 2) + (imageToCenter.offsetWidth / 2);
}
To call the above function on document load, paste this script in your html, or put it into a separate.js file and link it to your html.要在文档加载时调用上述 function，请将此脚本粘贴到 html 中，或将其放入单独的.js 文件中并将其链接到 html。
<script>
function centerThirdImageOfHorizontalGallery() {
const horizontalGallery= document.querySelector('.section-more-flats-images-card');
const imageToCenter= document.querySelector('#center-image');
// Centers the image by setting its parent element's scrollLeft
horizontalGallery.scrollLeft = imageToCenter.offsetLeft - (horizontalGallery.offsetWidth / 2) + (imageToCenter.offsetWidth / 2);
}
window.addEventListener('load', () => {
centerThirdImageOfHorizontalGallery();
});
</script>
解决方案2
0 2022-09-09 12:58:14
function centerThirdImageOfHorizontalGallery() { const horizontalGallery= document.querySelector('.section-more-flats-images-card'); const imageToCenter= document.querySelector('#center-image'); horizontalGallery.scrollLeft = imageToCenter.offsetLeft - (horizontalGallery.clientWidth / 2) + (imageToCenter.clientWidth / 2); }
.section-more-flats-images-card { display: grid; grid-gap: 7px; grid-template-columns: repeat(5, 27%); grid-template-rows: minmax(190px, auto); overflow-x: auto; margin-bottom: 34px; }.image-card { position: relative; max-height: 500px; max-width: 275px; background-color: red; }.image-card img { width: 100%; height: auto; }.image-card:nth-child(3) { margin-top: 31.9%; background-color: green; }.image-card:nth-child(2), .image-card:nth-child(5) { margin-top: 14.41%; }::-webkit-scrollbar { display: none; } @media screen and (min-width: 1019px) {.section-more-flats-images-card { grid-template-columns: repeat(5, 275px); } } @media screen and (min-width: 1300px) {.section-more-flats-images-card { justify-content: flex-start; margin-left: 4.4444%; gap: 20px; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1,0. maximum-scale=1.0"> <title>INGRAD</title> <link href="./resetNew.css" rel="stylesheet" /> <link href="./styleNewMain.css" rel="stylesheet" /> </head> <body> <main class="main"> <!-------------- DIV MORE FLATS IMAGES --------------> <div class="section-more-flats-images-card"> <div class="image-card"> </div> <div class="image-card"> </div> <div class="image-card" id="center-image"> </div> <div class="image-card"> </div> <div class="image-card"> </div> </div> </body> </html>
@YasinKuralay As you can see in the snippet above, the JS code doesn't center image.. @YasinKuralay 正如您在上面的代码片段中所见，JS 代码没有将图像居中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.