Прокручивать основной контент, когда курсор находится на боковой панелиCSS

Разбираемся в CSS
Ответить
Anonymous
 Прокручивать основной контент, когда курсор находится на боковой панели

Сообщение Anonymous »

Я хочу включить прокрутку основного списка контента, даже когда курсор находится над боковой панелью. Например, в X (ранее Twitter) лента остается прокручиваемой, даже когда курсор находится над боковым меню или представлением трендов на главной странице, в то время как кнопки меню и элементы трендов остаются доступными для нажатия. Как я могу реализовать такое поведение?
Я пытался использовать события указателя, но мне не удалось одновременно сделать боковую панель кликабельной и позволить основному содержимому оставаться прокручиваемым, когда курсор находится над ним. боковая панель.
Нет необходимости следовать следующему коду. Это просто для примера. но я планирую использовать Flex или Grid CSS для создания макета.

Код: Выделить всё

body {
margin: 0;
display: flex;
height: 100vh;
overflow: hidden;
}

.container {
display: flex;
width: 100%;
}

.sidebar {
width: 250px;
background-color: #f4f4f4;
}

.main-content {
flex: 1;
padding: 20px;
background-color: #fff;
overflow-y: auto;
}

Код: Выделить всё


side bar (main content is not scrollable when cursor is over here).
button should be clickable

text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text




Подробнее здесь: https://stackoverflow.com/questions/793 ... n-side-bar
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»