Firefox. Медленная прокрутка в #scrollzone
1 сообщение Страница 1 из 1
Firefox. Медленная прокрутка в #scrollzone
- Код: Выделить всё
<!doctype html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
}
#container {
overflow: auto;
width: 100%;
white-space: nowrap;
font-size: 0;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
scroll-behavior: smooth;
}
.slide {
width: 100%;
height: 400px;
display: inline-block;
}
#slide-1 {
background: #ffe477;
}
#slide-2 {
background: #0769ad;
}
#slide-3 {
background: #c6c;
}
#scroll-zone {
overflow-y: scroll;
margin: 20px auto;
width: 200px;
height: 360px;
background: #fff;
}
.items {
margin: 10px auto;
width: 120px;
height: 400px;
}
#item-1 {
background: #c02431;
}
#item-2 {
background: #03a753;
}
#item-3 {
background: #262626;
}
</style>
</head>
<body>
<div id="container">
<div id="slide-1" class="slide"></div>
<div id="slide-2" class="slide">
<div id="scroll-zone">
<div id="item-1" class="items"></div>
<div id="item-2" class="items"></div>
<div id="item-3" class="items"></div>
</div>
</div>
<div id="slide-3" class="slide"></div>
</div>
</body>
</html>
Чтобы было с чем сравнить, посмотрите на нормальный скроллинг:
- Код: Выделить всё
<!doctype html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
background: #0769ad;
}
#scroll-zone {
overflow-y: scroll;
margin: 40px auto;
width: 200px;
height: 360px;
background: #fff;
}
.items {
margin: 10px auto;
width: 120px;
height: 400px;
}
#item-1 {
background: #c02431;
}
#item-2 {
background: #03a753;
}
#item-3 {
background: #262626;
}
</style>
</head>
<body>
<div id="scroll-zone">
<div id="item-1" class="items"></div>
<div id="item-2" class="items"></div>
<div id="item-3" class="items"></div>
</div>
</body>
</html>
Вся надежда на Вас, уважаемые форумчане.
Страница 1 из 1