Мобильная версиявы прогуливаетесь по странице и приходите к Div, поскольку вы продолжаете прокручивать, теперь вы перемещаете содержание этого Div прямо налево, как только вы доберетесь до дальнейшего правого Край дивирования вы затем продолжаете прокручивать страницу как обычно. />https://codepen.io/logiadev/pen/kkexpmw
и настроил его, чтобы получить эффект, который я хотел:
https://codepen.io/cucocreative/pen/veykpjq
html < /p>
Scroll
Just padding
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
\/
Just padding
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
\/
< /code>
css < /p>
section {
height: 500px;
}
main {
background: #e9ecef;
gap: 1.25rem;
margin-bottom: 80px;
max-width: 100vw;
padding: 20px 0;
}
header, footer {
padding: 160px 28px;
}
h1 {
font-size: 4rem;
}
.photo-block {
position: sticky;
top: calc(0.1% - 0.1vh);
height: 100vh;
width: 100%;
display: grid;
overflow: hidden;
background: #868e96;
}
.photo-grid {
position: absolute;
transform: translate(-0%, 0%);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.photo {
width: 100vmax;
height: 100vh;
}
.collage {
height: 200vh;
view-timeline: --collage;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo {
animation-name: travel;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: --collage;
animation-range: entry 100% exit 0%;
}
@keyframes travel {
0% {
translate: 0 0;
}
100% {
translate: -100% 0;
}
}
< /code>
Как только я скопировал код на свой сайт Dev, я понял, что свойства CSS, которые я использовал, работали только в Chrome. См. Первый большой блок изображений здесь:
https://coast-agency.stackstaging.com/
Я понимаю, что используемое, которое я использовал, будет работать только на Chrome в настоящее время, Но то, чего я не понимаю, так это, если свойство не совместимо с Firefox, например, почему оно работает, если вы используете это свойство в Codepen и просматриваете это в Firefox? < /p>
Есть другой путь Я могу добиться этого, совместимого с Cross Browser? Кто -нибудь может указать мне в правильном направлении?
Подробнее здесь: https://stackoverflow.com/questions/794 ... -scrolling
