CSS點(diǎn)擊滾動(dòng)的li怎么寫

在CSS中，我們可以通過編寫JavaScript代碼來實(shí)現(xiàn)點(diǎn)擊滾動(dòng)到指定的li元素，以下是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<ul id="myList">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
  <li id="item4">Item 4</li>
  <li id="item5">Item 5</li>
</ul>

CSS代碼：

#myList {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#myList li {
  float: left;
  width: 20%;
  height: 200px;
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
}

JavaScript代碼：

document.getElementById('myList').addEventListener('click', function(e) {
  var target = e.target;
  if (target.tagName.toLowerCase() == 'li') {
    var position = target.getBoundingClientRect().top;
    document.getElementById('myList').scrollTop = position - document.getElementById('myList').offsetTop;
  }
});

在這個(gè)示例中，我們創(chuàng)建了一個(gè)帶有id的ul列表，每個(gè)li元素也有一個(gè)***的id，在CSS中，我們?cè)O(shè)置了ul列表的樣式，使其成為一個(gè)可滾動(dòng)的列表，在JavaScript中，我們添加了一個(gè)點(diǎn)擊事件監(jiān)聽器，當(dāng)用戶點(diǎn)擊某個(gè)li元素時(shí)，我們會(huì)獲取該元素的位置，并滾動(dòng)到該位置。