6

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

2 回答 2

4

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

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

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

于 2013-02-15T21:26:29.953 回答
-1

您可以使用 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>
于 2013-02-15T20:29:15.187 回答