快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突

本文要分享的是解决jquery.touchSwipe左右滑动与垂直滚动条冲突问题的方法，这是一个在移动端开发中经常遇到的问题。对于正在寻找解决方案的开发者们，这是一个值得参考的内容。

在实现Html5左右切换功能的我们还需要保留上下滚动条的功能。网上虽然有很多关于jquery.touchSwipe插件的使用示例，但关于左右滑动和垂直滚动条冲突问题的解决方案却并不多。我决定分享自己的解决方法。

我们通过将左右滑动的事件绑定到Body上，而上下滚动则使用DIV的垂直滚动来实现。这样，我们就可以避免左右滑动和垂直滚动的冲突。

具体的实现方式是，我们使用jquery.touchSwipe插件，通过swipe方法绑定左右滑动事件。代码如下：

`$("body").swipe({ fingers:'all', swipeLeft:swipe1, swipeRight:swipe2});`

然后，我们定义两个函数swipe1和swipe2，分别处理向左和向右滑动的事件。在函数中，我们可以根据滑动的方向执行相应的动作。

对于上下滚动条，我们只需要在div元素上设置overflow:auto，即可实现垂直滚动。例如：

`

在样式中，我们为class为cook的div设置overflow:auto，使其可以滚动。

我们还需要设置body和div的默认高度。可以使用以下代码实现：

`$("body").css("height",document.body.scrollHeight);`

`.cook").css("height",document.body.scrollHeight-$('cook').position().);`

以上就是解决左右滑动和垂直滚动条冲突的方法。通过这个方案，我们可以在移动端实现Html5左右切换功能，同时保留上下滚动条的功能。希望这篇文章对大家的学习有所帮助。

解决这个问题的关键在于将左右滑动事件绑定到Body上，而将上下滚动事件绑定到DIV上。通过这种方式，我们可以避免事件冲突，实现功能的同时保留滚动条的功能。希望这个解决方案能对大家有所帮助，如果有任何疑问或需要进一步讨论的地方，欢迎随时与我联系。