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

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

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

使用jQuery的主要缺点是什么？我认为你的实现会有更好的表现，因为jQuery人员一直在研究这些东西。

Answer 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>

Css或javascript滚动转换？

HTML

CSS

2 个答案: