Css或javascript滚动过渡？答案

【问题标题】：Css or javascript scroll transition?Css或javascript滚动过渡？
【发布时间】：2026-02-03 05:05:02
【问题描述】：

我有两个 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}

【问题讨论】：

代码的基本介绍也将欢迎您的帖子...
此链接可能会有所帮助：w3schools.com/jsref/prop_win_pagexoffset.asp
允许CSS3还是需要支持IE8及以下？
@Aaron 请不要链接到 w3Schools，只有可以适应的地方是不好的做法和无效的代码：(.
@Teemu jsfiddle.net/hSU7R 是基本介绍！

标签： javascript html css css-transitions

【解决方案1】：

这就是你要找的吗？ A fork of your jsFiddle.

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

使用 jQuery 的主要缺点是什么？我认为你会从他们的实现中获得更好的性能，因为 jQuery 的人一直在做这些事情。

【讨论】：

最后我用javascript实现了同样的效果，你可以在这里看到：
最后我用 javascript 实现了同样的效果，你可以在这里看到：jsfiddle.net/DruwJ/1 问题是，目前我正在设计一个带有 phonegap 的应用程序，当我包含 jquery 时，应用程序的加载时间很长，所以我决定只使用javascript。现在我有另一个问题，我想在页面中间添加另一个链接。视口应滚动到此链接，并在链接位于页面底部时停止。我希望有人明白我的意思，这是一个演示！ jsfiddle.net/DruwJ/8 谢谢！
这对我来说听起来像是一个新问题。

【解决方案2】：

您可以使用 css 控制滚动 (speed, direction, position(?)) 行为。

CSS3 过渡可以指定元素从一个状态到另一个状态的方式，而scroling 不是element。但是你可以定位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>

【讨论】：