Question

我正在使用Chris Coyier通过js在div周围封装表格单元格的方法来实现水平滚动http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/。但是，要滚动，你必须有一个水平滚动的鼠标或滚动时保持移位。

所以，我使用了这个hscroll.js插件http://paulicio.us/items/view/24/horizontal-page-scrolling-using-javascript，它允许你通过鼠标滚轮横向滚动页面。

但是在Firefox和Opera中测试时存在相当大的滞后/波动（在Chrome和Safari中运行良好）。我认为Brandon Aaron的mousewheel.js http://brandonaaron.net/code/mousewheel/docs将是可行的解决方案，但我不知道如何实现插件，因为当涉及到js时我是文盲。

Jsfiddle：http://jsfiddle.net/694TK/3/

更新：tinyscroll插件似乎工作正常，除了它没有缓动，任何解决方案？：http://jsfiddle.net/694TK/6/

又一次更新： http://jsbin.com/uwehot/
Mary Lou的圆形内容轮播*（http://tympanus.net/codrops/2011/08/16/circular-content-carousel/）*在这里播放。
它工作得很好，除了锚链接不起作用。

Answer 1

嗯，我不认为表格方法足够好。尝试包装您的段落并将锚链接设置为标题

那个锚链接将是动画的起止点“标记”。每次用户开始滚动（事件将由您的插件触发）时，动画开始并结束到下一个锚点看一下example

这家伙使用按钮点击事件来触发他的动画

$('#btn_two').click(function(){
$('.nav').fadeOut("fast").fadeIn("slow");
$.scrollTo(this.hash, 1500, { easing:'elasout' });
});

您将使用mousewheel事件。虽然这有点暴力为了在用户滚动时平滑移动，请使用缓动插件

使用鼠标滚轮进行水平滚动

1 个答案: