CSS还是JavaScript滚动过渡效果？

Question

我有两个带有以下内容的div：

width:100%; height:100%

我整个文档的高度为200％; 两个div之间有一个链接，

当我点击链接时，希望网页平滑地滑动到另一个div，

我知道在jquery中如何运作，例如使用.scrollto，但我的客户想要没有框架的应用程序。只有javascript和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>

The CSS

html,body { 
    width:100%;
    height:100%;}

.full {
    height:100%;
    width:100%;}

#one {background-color:green}
#two {background-color:red}

- Em Sta

---

请在您的帖子中提供代码的基本介绍... - Teemu

这个链接可能有帮助：http://www.w3schools.com/jsref/prop_win_pagexoffset.asp - Aaron

CSS3 允许使用，还是需要支持 IE8 及以下版本？ - Fabrício Matté

@Aaron 请不要链接到w3Schools，那里只有一些不好的实践和无法工作的代码可以被适应。 :( - Teemu

@Fabrício Matté 只需要在 Webkit 浏览器中工作！谢谢。 - Em Sta

Answer 1

这是您要找的吗？这是您 jsFiddle 的一个分支。

肯定有更聪明的方法，但这也是为什么我们有 jQuery 的原因吧？ 我的基本想法是抓取每个锚点并关闭默认的点击响应。 然后，用一个启动 setInterval 链来替换它。 每当间隔时间过去时，窗口将基于帧速率和估计的总运行时间逐步滚动。 实际运行时间似乎比输入时间长，但至少可以让您有一种开始的方式。

使用 jQuery 的主要缺点是什么？ 我认为，由于 jQuery 开发人员一直在处理这些问题，所以您会从他们的实现中得到更好的性能。

- Austin Mullins

---

最终我用JavaScript实现了相同的功能，你可以在这里看到： - Em Sta

最终我用JavaScript实现了相同的功能，您可以在这里看到：http://jsfiddle.net/DruwJ/1/。问题是，我正在使用PhoneGap设计一个应用程序，当我包含jQuery时，应用程序加载时间很长，所以我决定只使用JavaScript。现在我有另一个问题，我想在页面中间添加另一个链接。视口应该滚动到此链接，并在链接位于页面底部时停止。我希望有人能理解我的意思，这是演示！http://jsfiddle.net/DruwJ/8/。谢谢！ - Em Sta

这对我来说听起来像是一个新问题。 - Austin Mullins

Answer 2

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

CSS3转换使得在滚动时不是一个元素的情况下指定元素从一种状态到另一种状态的方式成为可能。但是您可以定位body。

有 'scroll-snap-points' 可能相关。

一种CSS技术，允许通过设置定义的捕捉点来自定义滚动体验，例如分页或旋转木马。

jsfiddled example

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>

- Milche Patern