前言
在 用 JavaScript 实现 position sticky 文章中，我提到了用 wheel 来模拟 scroll 效果。
这篇来说说具体怎么实现，挺简单的哦。
Preparation
table.html
<div class="container">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Address</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Country</th>
<th>Occupation</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
<td>123 Main St</td>
<td>[email protected]</td>
<td>123-456-7890</td>
<td>New York</td>
<td>USA</td>
<td>Software Engineer</td>
<td>$80,000</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
<td>456 Elm St</td>
<td>[email protected]</td>
<td>987-654-3210</td>
<td>Los Angeles</td>
<td>USA</td>
<td>Graphic Designer</td>
<td>$60,000</td>
</tr>
<tr>
<td>Michael</td>
<td>Johnson</td>
<td>35</td>
<td>789 Oak St</td>
<td>[email protected]</td>
<td>456-789-0123</td>
<td>Chicago</td>
<td>USA</td>
<td>Teacher</td>
<td>$50,000</td>
</tr>
<tr>
<td>Sarah</td>
<td>Williams</td>
<td>28</td>
<td>321 Pine St</td>
<td>[email protected]</td>
<td>789-012-3456</td>
<td>Miami</td>
<td>USA</td>
<td>Accountant</td>
<td>$70,000</td>
</tr>
<tr>
<td>David</td>
<td>Brown</td>
<td>40</td>
<td>654 Cedar St</td>
<td>[email protected]</td>
<td>210-987-6543</td>
<td>Houston</td>
<td>USA</td>
<td>Engineer</td>
<td>$90,000</td>
</tr>
<tr>
<td>Emily</td>
<td>Miller</td>
<td>33</td>
<td>987 Maple St</td>
<td>[email protected]</td>
<td>567-890-1234</td>
<td>Seattle</td>
<td>USA</td>
<td>Manager</td>
<td>$100,000</td>
</tr>
<tr>
<td>James</td>
<td>Wilson</td>
<td>27</td>
<td>753 Walnut St</td>
<td>[email protected]</td>
<td>890-123-4567</td>
<td>San Francisco</td>
<td>USA</td>
<td>Marketing Specialist</td>
<td>$75,000</td>
</tr>
<tr>
<td>Emma</td>
<td>Anderson</td>
<td>29</td>
<td>159 Birch St</td>
<td>[email protected]</td>
<td>234-567-8901</td>
<td>Boston</td>
<td>USA</td>
<td>Consultant</td>
<td>$85,000</td>
</tr>
<tr>
<td>Christopher</td>
<td>Lee</td>
<td>32</td>
<td>852 Oakwood St</td>
<td>[email protected]</td>
<td>678-901-2345</td>
<td>Atlanta</td>
<td>USA</td>
<td>Lawyer</td>
<td>$120,000</td>
</tr>
<tr>
<td>Olivia</td>
<td>Clark</td>
<td>26</td>
<td>357 Elmwood St</td>
<td>[email protected]</td>
<td>123-456-7890</td>
<td>Denver</td>
<td>USA</td>
<td>Artist</td>
<td>$55,000</td>
</tr>
<tr>
<td>William</td>
<td>White</td>
<td>31</td>
<td>951 Cedarwood St</td>
<td>[email protected]</td>
<td>456-789-0123</td>
<td>Phoenix</td>
<td>USA</td>
<td>Architect</td>
<td>$95,000</td>
</tr>
<tr>
<td>Ava</td>
<td>Hall</td>
<td>34</td>
<td>246 Pinecrest St</td>
<td>[email protected]</td>
<td>789-012-3456</td>
<td>Dallas</td>
<td>USA</td>
<td>Financial Analyst</td>
<td>$80,000</td>
</tr>
<tr>
<td>Alexander</td>
<td>Young</td>
<td>29</td>
<td>753 Maplewood St</td>
<td>[email protected]</td>
<td>210-987-6543</td>
<td>Philadelphia</td>
<td>USA</td>
<td>Real Estate Agent</td>
<td>$70,000</td>
</tr>
<tr>
<td>Mia</td>
<td>Scott</td>
<td>38</td>
<td>852 Oak St</td>
<td>[email protected]</td>
<td>567-890-1234</td>
<td>Minneapolis</td>
<td>USA</td>
<td>Doctor</td>
<td>$150,000</td>
</tr>
<tr>
<td>Ethan</td>
<td>Adams</td>
<td>27</td>
<td>369 Walnut St</td>
<td>[email protected]</td>
<td>890-123-4567</td>
<td>Portland</td>
<td>USA</td>
<td>Journalist</td>
<td>$65,000</td>
</tr>
<tr>
<td>Isabella</td>
<td>Carter</td>
<td>30</td>
<td>147 Pine St</td>
<td>[email protected]</td>
<td>234-567-8901</td>
<td>Detroit</td>
<td>USA</td>
<td>Entrepreneur</td>
<td>$200,000</td>
</tr>
<tr>
<td>Logan</td>
<td>Green</td>
<td>31</td>
<td>258 Elm St</td>
<td>[email protected]</td>
<td>678-901-2345</td>
<td>San Diego</td>
<td>USA</td>
<td>Engineer</td>
<td>$90,000</td>
</tr>
<tr>
<td>Amelia</td>
<td>Roberts</td>
<td>29</td>
<td>369 Cedar St</td>
<td>[email protected]</td>
<td>123-456-7890</td>
<td>Charlotte</td>
<td>USA</td>
<td>Designer</td>
<td>$70,000</td>
</tr>
<tr>
<td>Benjamin</td>
<td>Hill</td>
<td>35</td>
<td>741 Oakwood St</td>
<td>[email protected]</td>
<td>456-789-0123</td>
<td>San Antonio</td>
<td>USA</td>
<td>Manager</td>
<td>$100,000</td>
</tr>
<tr>
<td>Charlotte</td>
<td>Adams</td>
<td>33</td>
<td>852 Maple St</td>
<td>[email protected]</td>
<td>789-012-3456</td>
<td>Orlando</td>
<td>USA</td>
<td>Software Developer</td>
<td>$85,000</td>
</tr>
<tr>
<td>Gabriel</td>
<td>Cook</td>
<td>28</td>
<td>159 Pinecrest St</td>
<td>[email protected]</td>
<td>210-987-6543</td>
<td>Tampa</td>
<td>USA</td>
<td>Writer</td>
<td>$60,000</td>
</tr>
</tbody>
</table>
</div>
View Code
table.scss
.container {
max-height: 256px;
overflow-y: auto;
max-width: 768px;
margin-inline: auto;
}
table {
border-spacing: 0;
margin-inline: auto;
th,
td {
border: 1px solid black;
}
:is(th, td):nth-child(n + 2) {
border-left: unset;
}
td {
border-top: unset;
}
thead {
tr {
background-color: white;
}
th {
padding: 16px;
}
}
td,
th {
padding: 16px;
min-width: 250px;
max-width: 250px;
}
}
View Code
实现原理
监听 wheel 事件，会得到一个 WheelEvent 对象。
它里面有一个 deltaY 属性，我们 wheel 一下，这个 deltaY 会是 100 或 -100。
positive 表示 scroll down，negative 表示 scroll up。
100 是游览器设定的一下 wheel 要移动多少 scrollTop。
轻轻 wheel 一下就是 scrollTop += 100
如果快速 wheel 几下，这个 deltaY 不一定是 100，有可能是 200 甚至 300。
也就是说 wheel 的越快越多，移动的 scrollTop 越大。这是游览器的交互体验。
我们监听 wheel 然后 update scrollTop 就可以了。如果要体验好，就加入 animation，让它 smooth 一点。
标签：wheel,USA,Effect,St,000,JS,com,example From： https://www.cnblogs.com/keatkeat/p/18172143