Javascript鼠标滚轮事件滚动(Javascript mousewheel event scroll)

 你可以用CSS做到这一点，但它需要一个hacky解决方案，具有令人惊讶的良好浏览器支持 。 
 
 基本上，我们的想法是使用CSS计数器来计算所需列表项的项目数（用类标记）： 
 
<div class="numbered-stuff">
  <p>
    If you want the important stuff, skip to step
  </p>
  <ol>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li class="important">Important Stuff</li>
    <li>Stuff</li>
  </ol>
</div>
 
 在这种情况下，我们将第5个项目标记为我们的类，因此我们需要在它之前为每个项目递增计数器： 
 
ol {
  counter-reset: stuff;
}

ol li {
  counter-increment: stuff;
}

ol li.important:after{
  content:counter(stuff);
}
 
 安静简单吧？ 现在我们只需要在文本旁边放置after元素。 把它们放在一起（有点风格，因为丑陋的UI吮吸）： 
 
 
 
 
 
  
@import url('https://fonts.googleapis.com/css?family=Lato');
 body,
html {
  margin: 0;
  background: #efefef;
}
.numbered-stuff {
  position: relative;
  display: inline-block;
  padding-right: 25px;
  font-family: 'Lato', sans-serif;
}
p {
  background: white;
  margin: 0;
  padding: 10px;
}
ol {
  counter-reset: stuff;
}
ol li {
  counter-increment: stuff;
}
ol li.important:after {
  content: counter(stuff);
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  color: white;
  background: #009688;
}
}
 
  
<div class="numbered-stuff">
  <p>
    If you want the important stuff, skip to step
  </p>
  <ol>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li class="important">Important Stuff</li>
    <li>Stuff</li>
  </ol>
</div>
 
 
 
 
 
 当然，您可以根据需要更改html，但概念保持不变 

You can do it with just CSS, but it takes a hacky solution, with surprisingly good browser support.
 
Basically, the idea is to use CSS counters to count the number of items to the list item you want(marked with a class):
 
<div class="numbered-stuff">
  <p>
    If you want the important stuff, skip to step
  </p>
  <ol>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li class="important">Important Stuff</li>
    <li>Stuff</li>
  </ol>
</div>
 
In this case, we have the 5th item marked with our class, so we need to increment the counter for every item before it:
 
ol {
  counter-reset: stuff;
}

ol li {
  counter-increment: stuff;
}

ol li.important:after{
  content:counter(stuff);
}
 
Quiet simple, right? Now we just need to position the after element beside the text. Putting it all together(With a little bit of style, because ugly UI's suck):
 
 
 
 
 
  
@import url('https://fonts.googleapis.com/css?family=Lato');
 body,
html {
  margin: 0;
  background: #efefef;
}
.numbered-stuff {
  position: relative;
  display: inline-block;
  padding-right: 25px;
  font-family: 'Lato', sans-serif;
}
p {
  background: white;
  margin: 0;
  padding: 10px;
}
ol {
  counter-reset: stuff;
}
ol li {
  counter-increment: stuff;
}
ol li.important:after {
  content: counter(stuff);
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  color: white;
  background: #009688;
}
}
 
  
<div class="numbered-stuff">
  <p>
    If you want the important stuff, skip to step
  </p>
  <ol>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li class="important">Important Stuff</li>
    <li>Stuff</li>
  </ol>
</div>
 
 
 
 
 
Of course, you can change the html how you want, but the concept stays the same