Scrollen Sie durch den Hauptinhalt, wenn sich der Cursor in der Seitenleiste befindet ⇐ JavaScript

[Guest]

Ich möchte das Scrollen der Hauptinhaltsliste aktivieren, auch wenn sich der Cursor über der Seitenleiste befindet. Auf X (ehemals Twitter) bleibt der Feed beispielsweise scrollbar, auch wenn der Cursor über dem Seitenmenü oder der Trendansicht auf der Startseite positioniert ist, während die Menüschaltflächen und Trendelemente weiterhin anklickbar sind. Wie kann ich dieses Verhalten implementieren?
Ich habe versucht, Zeigerereignisse zu verwenden, aber es ist mir nicht gelungen, sowohl die Seitenleiste anklickbar zu machen als auch zu ermöglichen, dass der Hauptinhalt scrollbar bleibt, wenn sich der Cursor darüber befindet in der Seitenleiste.
Sie müssen dem folgenden Code nicht folgen. Es ist nur ein Beispiel. aber ich gehe davon aus, dass ich Flex- oder Grid-CSS verwenden werde, um das Layout zu erstellen.

Code: Select all

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;
}

Code: Select all

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