在我的页面上,我有两个面板,其中左侧面板包含堆叠在彼此顶部的项目列表,当我单击/选择其中一个项目时,右侧面板中将显示有关所选项目的更多信息.我需要右侧面板可滚动,因此添加了原生动态的动力滚动到此面板,如下所示 –
#rightPanel {
position:absolute;
top:50px;
height:400px;
width:500px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
要浏览左侧面板中的项目列表,我添加了单指滑动.它工作正常但是当我滑动下一个项目时,右侧面板已经滚动,这是不希望的.为了解决这个问题,添加了这个小例程,并在每次滑动时将rightPanel内容滚动到顶部,但是存在相当大的延迟,这使得感觉内容加载缓慢.
var scrollStopper = function() {
if ( (swipe == 'right') || (swipe == 'left') )
document.getElementById("rightPanel").scrollTop = 0;
document.getElementById('rightPanel').addEventListener('scroll',scrollStopper);
现在没有动力滚动事情按预期工作.有关如何在每次滑动时将右面板回滚到顶部而不会导致延迟的任何想法？
解决方法
您可以通过以下方式从UI获得更快的响应：
document.getElementById('leftPanel').addEventListener('touchstart',scrollStopper);
这应该意味着只要用户与左侧面板交互,右侧面板就会捕捉其滚动.
