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

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: Scrollen Sie durch den Hauptinhalt, wenn sich der Cursor in der Seitenleiste befindet

by Guest » 14 Jan 2025, 14:05

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

Top