Css或javascript滚动转换

Question

我有两个div：

width:100%; height:100%

所以我的整个文档有200%的高度；两个div之间都有一个链接，

现在，当我点击链接时，我希望网站能顺利地滑动到另一个div，

我知道这在jquery中是如何工作的，例如使用.scrollto，但我的客户想要一个包含框架的应用程序。只有javascricpt和css！

我试着用translateY实现它，但没有成功！

以下是一个示例代码：http://jsfiddle.net/hSU7R/

HTML

<div class="full" id="one">
   <span style="width:100%; background-color:blue">
   <a href="#two" >Scroll to 2</a>
   </span>    
</div>

<div class="full" id="two">
    <span style="width:100%; background-color:blue">
    <a href="#one" >Scroll to 1</a></span>
</div>

CSS

html,body { 
    width:100%;
    height:100%;}
.full {
    height:100%;
    width:100%;}
#one {background-color:green}
#two {background-color:red}

Answer 1

这就是您想要的吗？你的jsFiddle叉子。

必须有一种更聪明的方法来做到这一点，但这就是为什么我们有jQuery对吗？我的基本想法是抓住每个锚点并关闭默认的点击响应。然后，将其替换为启动setInterval链的链。每次间隔发生时，窗口将根据帧速率和估计的总运行时间递增滚动。实际运行时间似乎比输入时间长，但它至少为您提供了一种入门方法。

使用jQuery的主要缺点是什么？我认为您会从它们的实现中获得更好的性能，因为jQuery人员一直在处理这些东西。

Answer 2

您可以使用css控制滚动（速度、方向、位置（？））行为。

CSS3转换允许指定元素从一个状态到另一个状态的方式，而scroling不是element。但您可以定位body。

有可能与之相关的"滚动捕捉点"。

一种CSS技术，允许自定义滚动体验，如通过设置定义的捕捉点对转盘进行分页。

jsfiddled示例

CSS

.gallery {
  font-size: 0;
  margin: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-points-x: repeat(1000px);
  scroll-snap-type: mandatory;
  white-space: nowrap;
  width: 1000px;
}
img {
  width: 100%;
}

HTML

<div class="gallery">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg">
</div>