制作一个从左向右滚动的画廊，但滚动中的第一个元素以 margin-left auto 开头，以便其居中

问题描述 投票：0回答：1

我正在尝试做一个小项目并且想知道

我现在有这样的页面：https://meowrhino.github.io/profilePics/

并且希望画廊有一个像图中那样的卷轴

它有一个宽度宽的画廊，但希望它在第一个元素进入滚动条时滚动不会开始/结束，但滚动条内部有边距，以便第一个图像出现在滚动条的中心页面（就像在图片库中）和最后一个页面的作用相同（我不知道溢出中是否有边距选项，或者我可以添加到第一个和最后一个 div 中）

这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>profile pics</title>
    <style>
        body {
            text-align: center;
            font-family: sans-serif;

            display: flex;
            flex-direction: column;
            justify-content: center;
            
            margin: 0;
        }

        .gallery {
            display: inline-block;
            white-space: nowrap;
            gap: 50px;
            overflow: scroll;
        }

        .profilePic {
            width: 512px;
            height: 512px;
        }

        .text {
            max-width: 820px;
            margin-left: auto;
            margin-right: auto;
        }

    </style>
</head>

<body>

    <div class="text">
        <h1>
        my gallery
        </h1>
        <h3>
            I love to upload images that I find relatable to my Telegram profile, and from time to time I indulge in scrolling through them and find patterns, today I found out that the first one was lost due to the 100 max photos limit (Telegram just did it automatically) so I wanted to create an archive to save them forever and be able to store more than just a hundred of them
        </h3>
    </div>

    <div class="gallery">
    </div>

    <script>
        const cantidadDeFotos = 100;
        const gallery = document.querySelector(".gallery")

        for (i = cantidadDeFotos; i > 0; i--) {
            let image = document.createElement("img");
            image.src = `img/${i}.PNG`
            image.classList.add("profilePic")
            gallery.appendChild(image);
        }
    </script>
</body>

</html>

javascript css overflow margin center
1个回答
0
投票

解决了！添加了一个函数来计算我需要的边距，并创建一个空的 div，将该金额作为边距:)

如果imgWidth和imgGap是通过JS获得的那就太好了，但我想那将是下一个水平哈哈

    <script>
    const cantidadDeFotos = 100;
    const gallery = document.querySelector(".gallery");

    const screenWidth = document.documentElement.scrollWidth;
    const imgWidth = 512;
    const imgGap = 50;

    function addScrollMargin() {
        let marginToAdd = screenWidth / 2 - imgWidth / 2 - imgGap;

        let margin = document.createElement("div");
        margin.classList.add("galleryMargin");
        margin.style.margin = `${marginToAdd/2}px`;

        gallery.appendChild(margin);

        console.log(margin);
    }

    addScrollMargin();

    for (i = cantidadDeFotos; i > 0; i--) {
        let image = document.createElement("img");
        image.src = `img/${i}.PNG`;
        image.classList.add("profilePic");
        gallery.appendChild(image);
    }

    addScrollMargin();
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.