网格模板行阻碍滚动功能

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

我是一个初学者，我一生都无法理解为什么当我实现 grid-template-rows 来定义菜单栏和内容 div 的大小时，内容会失去其现有的滚动功能。 这是我将 grid-template-rows 添加到正文时

有人可以帮我理解为什么吗。

我尝试了模板行、自动行，不确定我错过了什么。

编辑：我也尝试过重新包裹整个身体。现在有点像在黑暗中刺伤。 编辑：一旦重新包裹高度超过 700px，滚动功能就会停止。 https://codepen.io/Jago971/pen/YzMYYGW

<body>
    <ul>
        <li class="menuOption">
            <i class="fa-solid fa-house"></i>
        </li>
        <li class="menuOption">
            <i class="fa-solid fa-user"></i>
        </li>
        <li class="menuOption">
            <i class="fa-solid fa-magnifying-glass"></i>
        </li>
        <li class="menuOption">
            <i class="fa-solid fa-gear"></i>
        </li>
        <li class="menuOption">
            <i class="fa-solid fa-rotate-left"></i>
        </li>
    </ul>
    <div id="tilesCarousel">
        <div id="fadeTop"></div>
        <div class="tileContainerWrap">
            <div class="tileContainer color5">
                <h1 class="hiddenInfo">2021</h1>
                <div class="tile">Jan</div>
                <div class="tile">Feb</div>
                <div class="tile">Mar</div>
                <div class="tile">Apr</div>
                <div class="tile">May</div>
                <div class="tile">Jun</div>
                <div class="tile">Jul</div>
                <div class="tile">Aug</div>
                <div class="tile">Sep</div>
                <div class="tile">Oct</div>
                <div class="tile">Nov</div>
                <div class="tile">Dec</div>
            </div>
        </div>
        
        
        <div class="tileContainerWrap">
            <div class="tileContainer color1">
                <h1 class="hiddenInfo">2022</h1>
                <div class="tile">Jan</div>
                <div class="tile">Feb</div>
                <div class="tile">Mar</div>
                <div class="tile">Apr</div>
                <div class="tile">May</div>
                <div class="tile">Jun</div>
                <div class="tile">Jul</div>
                <div class="tile">Aug</div>
                <div class="tile">Sep</div>
                <div class="tile">Oct</div>
                <div class="tile">Nov</div>
                <div class="tile">Dec</div>
            </div>
        </div>
        
        
        <div class="tileContainerWrap">
            <div class="tileContainer color2">
                <h1 class="hiddenInfo">2023</h1>
                <div class="tile">Jan</div>
                <div class="tile">Feb</div>
                <div class="tile">Mar</div>
                <div class="tile">Apr</div>
                <div class="tile">May</div>
                <div class="tile">Jun</div>
                <div class="tile">Jul</div>
                <div class="tile">Aug</div>
                <div class="tile">Sep</div>
                <div class="tile">Oct</div>
                <div class="tile">Nov</div>
                <div class="tile">Dec</div>
            </div>
        </div>
        
        
        <div class="tileContainerWrap">
            <div class="tileContainer color3">
                <h1 class="hiddenInfo">2024</h1>
                <div class="tile">Jan</div>
                <div class="tile">Feb</div>
                <div class="tile">Mar</div>
                <div class="tile">Apr</div>
                <div class="tile">May</div>
                <div class="tile">Jun</div>
                <div class="tile">Jul</div>
                <div class="tile">Aug</div>
                <div class="tile">Sep</div>
                <div class="tile">Oct</div>
                <div class="tile">Nov</div>
                <div class="tile">Dec</div>
            </div>
        </div>
        
        
        <div class="tileContainerWrap">
            <div class="tileContainer color4">
                <h1 class="hiddenInfo">2025</h1>
                <div class="tile">Jan</div>
                <div class="tile">Feb</div>
                <div class="tile">Mar</div>
                <div class="tile">Apr</div>
                <div class="tile">May</div>
                <div class="tile">Jun</div>
                <div class="tile">Jul</div>
                <div class="tile">Aug</div>
                <div class="tile">Sep</div>
                <div class="tile">Oct</div>
                <div class="tile">Nov</div>
                <div class="tile">Dec</div>
            </div>
        </div>
        
        
        <div class="tileContainerWrap">
            <div class="tileContainer color5">
                <h1 class="hiddenInfo">2026</h1>
                <div class="tile">Jan</div>
                <div class="tile">Feb</div>
                <div class="tile">Mar</div>
                <div class="tile">Apr</div>
                <div class="tile">May</div>
                <div class="tile">Jun</div>
                <div class="tile">Jul</div>
                <div class="tile">Aug</div>
                <div class="tile">Sep</div>
                <div class="tile">Oct</div>
                <div class="tile">Nov</div>
                <div class="tile">Dec</div>
            </div>
        </div>
        
        
        <div class="tileContainerWrap">
            <div class="tileContainer color1">
                <h1 class="hiddenInfo">2027</h1>
                <div class="tile">Jan</div>
                <div class="tile">Feb</div>
                <div class="tile">Mar</div>
                <div class="tile">Apr</div>
                <div class="tile">May</div>
                <div class="tile">Jun</div>
                <div class="tile">Jul</div>
                <div class="tile">Aug</div>
                <div class="tile">Sep</div>
                <div class="tile">Oct</div>
                <div class="tile">Nov</div>
                <div class="tile">Dec</div>
            </div>
        </div>
        <div id="fadeBottom"></div>
    </div>
</body>

body {
    height: 100vh;
    margin: 0;
    padding: 0 20px;
    border: solid 1px;
    display: grid;
}
ul {
    margin: 0;
    padding: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(5, 1fr);
    border: solid 1px;
    background-color: rgb(80, 80, 80);
    border-radius: 0 0 25px 25px;
}
li {
    background-color: rgb(51, 51, 51);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: scale, 0.25s;
}
li:hover {
    scale: 1.05;
    cursor: pointer
}
i {
    color: white;
}
#fadeTop {
    position: fixed;
    height: 50px;
    width: calc(100vw - 40px);
    border: solid 1;
    background-color: white;
    background: linear-gradient(to top, transparent, white);
}
#fadeBottom {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: calc(100vw - 40px);
    border: solid 1;
    background-color: white;
    background: linear-gradient(to top, white, transparent);
}
#tilesCarousel {
    position: relative;
    display: grid;
    grid-auto-rows: 100%;
    overflow: scroll;
    scroll-snap-type: y mandatory;
}
#tilesCarousel::-webkit-scrollbar {
    display:none
}
.tileContainerWrap {
    scroll-snap-align: start;
    display: grid;
}
.tileContainer {
    margin: 50px 0;
    border-radius: 25px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-left: 20px;
    padding-top: 20px;
}
.hiddenInfo {
    display: none;
}
.tile {
    margin-right: 25px;
    margin-bottom: 25px;

    font-family: Dosis;
    font-size: 1.5rem;
    background-color: white;
    border: solid 5px rgb(80, 80, 80);
    border-radius: 15px;
    box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.4);

    display: flex;
    justify-content: center;
    align-items: center;
    transition: scale, 0.25s;
}
.tile:hover {
    scale: 1.03;
    cursor: pointer
}
html css scroll css-grid
1个回答
0
投票

我注意到在使用 CSS 网格布局时，您在网页上的滚动功能方面遇到了问题。您可以尝试以下一些调整：

调整网格布局：由于您在正文和 #tilesCarousel 中使用了 display: grid，因此网格布局的应用方式可能会发生冲突。尝试从正文样式中删除 display: grid 并查看是否可以解决问题。 调整正文 CSS，例如：

body {
    height: auto; 
    margin: 0;
    padding: 0 20px;
    border: solid 1px;
}

确保足够的高度：确保#tilesCarousel容器的高度足以容纳其内容而不会导致溢出。您可以调整 grid-auto-rows 属性或显式将高度设置为一个值，以确保在必要时启用滚动。

检查溢出属性：仔细检查溢出：滚动属性是否应用于#tilesCarousel容器并且未被其他样式覆盖。

检查子元素：验证 #tilesCarousel 容器内的内容 div 的高度是否已正确计算，并且其溢出属性没有被无意中修改。

在没有滚动捕捉的情况下进行测试：暂时删除scroll-snap-type和scroll-snap-align属性以查看它们是否可能干扰滚动功能。

 body {
    height: auto;
    margin: 0;
    padding: 0 20px;
    border: solid 1px;
 }

 ul {
    margin: 0;
    padding: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(5, 1fr);
    border: solid 1px;
    background-color: rgb(80, 80, 80);
    border-radius: 0 0 25px 25px;
 }

 li {
    background-color: rgb(51, 51, 51);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: scale, 0.25s;
 }

 li:hover {
    scale: 1.05;
    cursor: pointer;
 }

 i {
    color: white;
 }

 #fadeTop {
    position: fixed;
    height: 50px;
    width: calc(100vw - 40px);
    border: solid 1;
    background-color: white;
    background: linear-gradient(to top, transparent, white);
 }

 #fadeBottom {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: calc(100vw - 40px);
    border: solid 1;
    background-color: white;
    background: linear-gradient(to top, white, transparent);
 }

 #tilesCarousel {
    position: relative;
    height: 100vh;
    overflow: auto;
    scroll-snap-type: y mandatory;
 }

 #tilesCarousel::-webkit-scrollbar {
    display: none;
 }

 .tileContainerWrap {
    scroll-snap-align: start;
    overflow: auto;
 }

 .tileContainer {
    margin: 50px 0;
    border-radius: 25px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-left: 20px;
    padding-top: 20px;
 }

 .hiddenInfo {
    display: none;
 }

.tile {
    margin-right: 25px;
    margin-bottom: 25px;
    font-family: Dosis;
    font-size: 1.5rem;
    background-color: white;
    border: solid 5px rgb(80, 80, 80);
    border-radius: 15px;
    box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: scale, 0.25s;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.