Möglichkeit, das ausgewählte Element im Seitenleistenmenü nach dem Neuladen der Seite oben zu belassen

Question

Ich habe ein scrollbares Seitenleistenmenü. Wenn ich also einen Menüpunkt auswähle, sollte er oben in der Seitenleiste erscheinen. Das Einrichten des aktiven Menüs ist kein Problem. Ich habe es. Aber ich kann die obere Position der Seitenleiste nicht festlegen. Bitte empfehlen Sie jQuery nicht. Stattdessen wurde mir geraten, einfaches JavaScript zu verwenden Hier ist eine Codereferenz

.sidebar{
    height:100px
    overflow-y:scroll;
}
.sidebar ul li{
    padding:30px;
}

<!-- CSS -->

 <!-- html  -->
<div class="sidebar">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>........
    <li>item100</li>
  </ul>
</div>

P粉461599845 · Answer

使用 :target 伪类、flexbox 布局以及 order 属性的纯 CSS 解决方案。

.sidebar {
  background-color: #ddd;
  height: 200px;
  overflow-y: scroll;
}
.sidebar ul {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.sidebar li {
  padding: 1em;
  order: 1;
}
.sidebar :target {
  background-color: #aaa;
  order: 0;
}


  
    item1
    item2
    item3
    item4
    item5
    item7
    item8
    item9
    item100