Question

我使用了jInvertScroll插件来创建一个水平滚动的网站。但是，我还想要一种用户可以单击某个元素的行为，并且屏幕会以水平方式设置其中心的动画。

我尝试过这个解决方案：

$('body, html').animate({
        scrollLeft: $("#img").offset().top
        });

...但我不能让它横向工作。

我曾尝试使用ScrollTo插件，但插件似乎不兼容，因为它们需要不同的位置值。实际上，我现在得到的只是按下按钮使其聚焦于元素时，整个页面向右滚动约400像素。

有没有人知道我可以创建一个水平网站的方式，也可以点击某些hoironztal点？

Answer 1

我没有点击用户实际上可以看到的东西，但是这里有一个例子，你可以动画水平滚动到元素。

Mabey它会帮助你。

CellTemplate

$("button").click(function() {
  var start_position = $('.first').offset().left;
  var element_position = $('.scroll').offset().left;

  if (start_position > 0) {
    $('.demo').animate({
      scrollLeft: start_position + element_position
    }, 1000);
  } else {
    $('.demo').animate({
      scrollLeft: -1 * start_position + element_position
    }, 1000);
  }

  return false;
});

.demo {
  background: #ccc none repeat scroll 0 0;
  border: 3px solid #666;
  margin: 5px;
  padding: 5px;
  position: relative;
  width: 600px;
  overflow-x: scroll;
}

.demo img {
  float: left;
  width: 300px;
  height: 100px;
}

.wrapper {
  width: 1500px
}

jQuery水平滚动网站，具有scrollTo行为

1 个答案: