#html #css #scroll #scrollbar
#HTML #css #прокрутка #полоса прокрутки
Вопрос:
Я работаю над целевой страницей.
В третьем разделе у меня будет контент с горизонтальной полосой прокрутки. У меня уже есть желаемое поведение прокрутки, но я бы хотел, чтобы полоса прокрутки соответствовала контейнеру страницы.
Вот мой текущий код:
.page {
overflow: hidden;
}
.container {
width: 60%;
margin: auto;
}
h3 {
background: #dbd0bc;
color: #000;
padding: 1rem;
}
.hs {
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;
}
.hs .item {
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;
}
::-webkit-scrollbar {
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: gray;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: red;
border-radius: 2rem;
}
<div class="page">
<div class="container">
<h3>Section 1</h3>
</div>
<div class="container">
<h3>Section 2</h3>
</div>
<ul class="hs">
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
</ul>
<div class="container">
<h3>Section 4</h3>
</div>
</div>
Вот два примера того, на что я хотел бы, чтобы это было похоже:
https://prnt.sc/n0o0k7
https://prnt.sc/n0o21r
Ответ №1:
Я не совсем уверен, что понимаю вопрос. Третий раздел не был бы правильно оформлен в контейнере, потому что вы не поместили его в контейнер. Я перенес стили класса container в стиль класса page и удалил все контейнеры для достижения желаемого эффекта.
.page {
overflow: hidden;
width: 60%;
margin: auto;
}
h3 {
background: #dbd0bc;
color: #000;
padding: 1rem;
}
.hs {
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;
}
.hs .item {
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;
}
::-webkit-scrollbar {
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: gray;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: red;
border-radius: 2rem;
}
<div class="page">
<h3>Section 1</h3>
<h3>Section 2</h3>
<ul class="hs">
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
</ul>
<h3>Section 4</h3>
</div>
Комментарии:
1. Мне нужно, чтобы содержимое перемещалось из левого угла в правый угол, на 100% от ширины страницы, это у меня уже есть в моем коде, мне просто нужно, чтобы полоса прокрутки была размером с «.контейнер»
2. Не уверен, что вы можете выполнить это с помощью обычной полосы прокрутки. Не уверен, что вы тоже этого хотите, поскольку стилизация полос прокрутки проблематична в разных браузерах. Может выглядеть не очень красиво, например, в Edge. Возможно, стоит подумать о создании пользовательской полосы прокрутки, над которой у вас будет больше контроля. Пример, на который вы ссылаетесь, выглядит так, как будто в нем используется что-то пользовательское.