سلام من یک اسکرول افقی میخوام داشته باشم برای نمایش عکس ها ، ولی موقع پیاده سازیش به یک مشکلی میخورم . اینه که به شکل کامل اسکرول نمیخوره و بعضی از آیتم ها میرن اون ته قایم میشن و ظاهر نمیشن متاسفانه .
کد html:
<body>
<div class="navbar"></div>
<div class="header"></div>
<div class="section1">
<div class="box">
<img src="./images/3.jpg" alt="">
</div>
<div class="box">
<img src="./images/4.jpg" alt="">
</div>
<div class="box">
<img src="./images/8.jpg" alt="">
</div>
<div class="box">
<img src="./images/2.jpg" alt="">
</div>
<div class="box">
<img src="./images/5.jpg" alt="">
</div>
<div class="box">
<img src="./images/1.jpg" alt="">
</div>
<div class="box">
<img src="./images/6.jpg" alt="">
</div>
</div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
<div class="section5"></div>
<div class="footer"></div>
</body>
کد css :
html {
font-size: 100%;
}
body {
display: flex;
flex-direction: column;
background-color: darkred;
}
.navbar {
height: 75px;
background-color: black;
}
.header {
height: 400px;
background-color: blue;
margin-bottom: 2.5rem;
}
.section1 {
height: 350px;
width: calc(100% - 20%);
margin: 10%;
background-color: wheat;
margin-bottom: 2.5rem;
display: flex;
flex-direction: row;
overflow-x:auto;
overflow-y: hidden;
justify-content: center;
scroll-snap-align: start;
scroll-snap-type: x mandatory;
}
.section1 > *{
flex-basis: 180px;
max-height: 200px;
flex-grow: 1;
}
.box {
margin-right: 1rem;
scroll-snap-align: end;
scroll-margin-inline: 3rem;
}
موقعی که در بیشترین عرض صفحه قرار داریم همه آیتم ها نمایش داده میشن :
موقعی که عرض های کوچکتر میریم :
همونطور که می بینید از سمت راست اسکرول به آخر رسیده ولی دو آیتم آخر رو نصفه یا اصلا نشون نمیده .
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟