关于javascript:Skrollr页面上的移动导航栏水平滚动 | 珊瑚贝

Mobile navbar horizontal scroll on Skrollr page


我的移动导航栏位置固定在屏幕底部并溢出到右侧。我希望能够水平滚动,但是,skrollr 似乎正在捕获滚动事件并将其转换为垂直滚动。

禁用 skrollr 后,我可以水平滚动导航栏。

我尝试将导航栏的 zindex 设置得尽可能高,但 skrollr 仍然会对其进行触摸。

这可能吗?

编辑:

想上传一个我想要实现的草图以使其更清晰。

覆盖位置固定,位于屏幕底部,z 索引在所有内容之上,其内容向右溢出:

1
whitespace: nowrap; overflowx: auto; overflowy: hidden;

在移动设备上,拖动叠加层会开始滚动整个页面,并且叠加层不会左右滚动。如果我使用鼠标水平滚轮,它会滚动,但不能触摸。

enter

  • 分享你的代码
  • 这是一个codepen(但您需要查看这是一个移动模拟器才能看到问题,因为您可以使用普通滚动滚动覆盖 – 而不是触摸)


通过停止在覆盖元素上的 touchmove、touchstart 和 touchend 事件的传播来解决此问题:

$overlay.on(‘touchmove touchstart touchend’, function(e) {
e.stopPropagation();
});

这破坏了对覆盖层内的任何链接的点击,但为它们添加了一个虚拟监听器修复了它:

$overlayLinks.on(‘touchmove touchstart touchend’, function() {
return true;
});


来源:https://www.codenong.com/39396602/

微信公众号
手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_9660.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
0
分享到:
没有账号? 忘记密码?