使用滚轮水平滚动

我使用的是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中正常工作），存在相当大的延迟/不连续性。我认为布兰登亚伦的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/）*在这里玩。
它工作得很好，除了锚链接不起作用。

来源

2012-01-13 carpenumidium

我可以问你不要做一个动态网站或一些静态的吗？ – Theodore 2012-01-13 22:26:11

动态。这就是我使用表格方法的原因。否则，我不得不用不正确的测量来定义身体的宽度。 – carpenumidium 2012-01-13 22:32:33

嗯，我不这么认为 – Theodore 2012-01-13 22:34:00

嗯，我不认为这样的表方法是够好的。尝试包装您的段落并设置锚点链接到标题

该锚链接将成为您的动画的开始 - 停止“标记”。每个用户开始滚动（该活动将通过你的插件触发）动画开始和结束到下一个锚时看的example

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

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

您将使用mousewheel事件。虽然这是一个有点暴力的方法为了顺利移动，因为用户滚动使用缓动插件

来源

2012-01-13 22:44:52 Theodore

你可以jsfiddle的例子吗？无论如何，我遇到了这个旧的插件：http://dl.dropbox.com/u/32750720/res/thw.js它没有缓解，我没有测试与其余的CSS天赋页面补充，但它似乎工作非常好：http://jsfiddle.net/694TK/6/ – carpenumidium 2012-01-13 23:15:29

使用滚轮水平滚动

回答

相关问题