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>

Answer 1

使用 :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