Question

我知道这是一个经常出现的问题，但我找不到符合我要求的答案。

简而言之，我想从屏幕的右侧（不可分割的）部分向左水平滑动一个框，然后从左侧向右滑动。

下面的html / css / js演示了我想要的内容：

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
#box-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80em;
  background-color: #f00;
}
#box-2 {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 4em;
  background-color: #0f0;
}
#viewport {
  overflow: hidden;
  position: relative;
  height: 100em;
}
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
</head>
<body>
<div id="viewport">
  <div id="container">
    <div style="position: relative">
      <div id="box-1">
      </div>
      <div id="box-2">
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$("#box-1").click(function () {
    $(this).parent().parent().animate({left: "-100%"});
});
$("#box-2").click(function () {
    $(this).parent().parent().animate({left: "0"});
});
</script>
</body>
</html>

现在，除了两件重要的事情外，一切似乎都很好：

我不想为外部视口指定高度。我希望此视口自动采用容器中最高项目的高度
当红色框可见并点击它时，如果向下滚动页面底部，则此代码无法执行我想要的操作：绿色框位于视口内，但在底部滚动。我想直接看到绿色的盒子。作为奖励，如果一旦看到绿色框，那将是很好的，如果我点击它，红色框回到其先前滚动位置的视野。

当然，这个例子还有很多其他限制（jquery提供的默认动画功能等等......）但是我相信我以后可以修复它们。

鉴于我在这里发布的解决方案的局限性，我怀疑我没有选择正确的方法，但我不知道应该从哪里开始。

Answer 1

单击该框时，您需要滚动到div的顶部。这是代码：

$(function() {
    var vheight = Math.max($("#box-1").height(), $("#box-2").height());
    $("#viewport").height(vheight)
});
$("#box-1").click(function () {
    $(this).parent().parent().animate({left: "-100%"});
    $('html,body').animate({
       scrollTop: $("#box-1").offset().top
    });
});
$("#box-2").click(function () {
    $(this).parent().parent().animate({left: "0"});
    $('html,body').animate({
       scrollTop: $("#box-2").offset().top
    });
});

我还更新了JS小提琴：http://jsfiddle.net/Av7P3/1/

html中的水平幻灯片

1 个答案: