菜鸟教程小白 发表于 2022-12-13 11:08:05

javascript - iOS:-webkit-overflow-scrolling:touch 和 scrollTop


                                            <p><p>我在尝试返回列表顶部时遇到了一些问题。 </p>

<p>我将 <code>-webkit-overflow-scrolling:touch</code> 放在列表中以获得动量滚动。
但是，当我使用 jQuery <code>scrollTop();</code> 而动量滚动仍在进行时，它会跳到顶部，但不会停止动量。所以它会继续下跌，直到势头结束。</p>

<p>有没有简单的方法来停止动量滚动？</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>将列表的 <code>-webkit-overflow-scrolling</code> 样式设置为 <code>'auto'</code>，然后在短暂超时后返回 <code>'touch'</code>。 </p>

<p>即</p>

<pre><code>let scrollContainer = document.getElementById(&#39;yourListId&#39;);

scrollContainer.style[&#39;-webkit-overflow-scrolling&#39;] = &#39;auto&#39;;// stop scroll

setTimeout(function() {
       scrollContainer.scrollTop = 0;// or jQuery scrollTop()
       scrollContainer.style[&#39;-webkit-overflow-scrolling&#39;] = &#39;touch&#39;; // re-enable
}, 2);
</code></pre>

<p>引用:<a href="https://stackoverflow.com/questions/16109561/force-stop-momentum-scrolling-on-iphone-ipad-in-javascript" rel="noreferrer noopener nofollow">this SO answer</a> . (修改了他们的实现以摆脱桌面浏览器上的滚动条重绘抖动)</p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - iOS:-webkit-overflow-scrolling:touch 和 scrollTop，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/31229950/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/31229950/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - iOS:-webkit-overflow-scrolling:touch 和 scrollTop