У меня есть навигационная панель с position: sticky.Внутри длинный ряд элементов.Эта линейка элементов прокручивается горизонтально.
Все работает, как и ожидалось, пока navbar не "прилипнет" к верхней части страницы.Когда я пытаюсь прокрутить свою навигационную панель (используя trackpad ), браузер пытается прокрутить всю страницу.
Я вижу эту проблему только в браузерах Webkit (Safari, Chrome).В Firefox такой проблемы нет.
Я пытался создать пример в CodePen и JSfiddle, однако эту проблему невозможно воспроизвести, поскольку результат отображается внутри iframe.
Итак, я создал небольшой файл HTML, который показывает проблему:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.header {
height: 100px;
background-color: purple;
}
.wrapper {
position: relative;
}
.navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
overflow: auto;
padding: 1rem 0;
background-color: lightgreen;
}
.navbar-container {
display: flex;
}
.navbar a {
padding: 1rem 2rem;
background-color: #fff;
white-space: nowrap;
margin: 0 1rem;
}
.text {
height: 150vh;
background: linear-gradient(lightyellow, black);
}
</style>
</head>
<body>
<div class="header"></div>
<div class="wrapper">
<div class="navbar">
<div class="navbar-container">
<a href="#item1">Item 1</a>
<a href="#item2">Item 2</a>
<a href="#item3">Item 3</a>
<a href="#item4">Item 4</a>
<a href="#item5">Item 5</a>
<a href="#item6">Item 6</a>
<a href="#item7">Item 7</a>
<a href="#item8">Item 8</a>
<a href="#item9">Item 9</a>
<a href="#item10">Item 10</a>
<a href="#item11">Item 11</a>
<a href="#item12">Item 12</a>
<a href="#item13">Item 13</a>
</div>
</div>
<div class="text"></div>
</div>
</body>
</html>