6

私は2つの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>

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 に答える