14

私は現在、スクロール機能に関してこれに似たものを必要とするサイトに取り組んでいます: http://www.apple.com/iphone-5s/

この質問をしている最中に、サイトの一部をアップロードしました - http://www.bnacademy.com.au/

私はサイトの（アップルの）コードに目を通しましたが、もちろん、私が疑うべきだったように、空になりました。スクロールできるフルページ div (背景画像付き) を作成する方法を探しています。次の div へのスクロールは、マウスによる 1 回の上下スクロールで行われます。

動的なフルページの div を処理しました。スクロール機能もほとんどダウンしていましたが、期待どおりに機能せず、すでに数日を費やしています。

HTML:

<div class="splashPage mainDiv"></div>
<div id="containerHomes" class="mainDiv homesPosition"></div>

CSS:

.homesPosition {
    top: 100%;
}

.splashPage {
    background: black;
    z-index: -200;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#containerHomes {
    z-index: -200;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background:url(../img/background-placeholder.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;    
}

Jクエリ:

<!-- Keep the div at max page height and width -->
<script type="text/javascript">
var height = $(window).height();
var width = $(window).width();
$(function() {
    $(window).resize(function() {
        $(".mainDiv").height(height);
        $(".mainDiv").width(width);
        $("#sidebar").height(height);
    var height = $(window).height();
    var width = $(window).width();
    });
});
</script>

<!-- Scroll up and down detection/movement -->
<script type="text/javascript">
    $(window).bind('mousewheel', function(event) {
        if (event.originalEvent.wheelDelta >= 0) {
            $(window).scrollTo('0%', 1000);
        }
        else {
            $(window).scrollTo('100%', 1000);
        }
        event.preventDefault()
    });
</script>

Flesler の scrollTo プラグインを使用しています (実際には、2 つ以上のリンクを投稿する担当者がいません)。

これは正常に機能していますが、希望どおりに上下にスクロールする完全な方法を見つける方法をまだ見つけていません。私がそこに持っているものを使用して、(多くのユーザーのように) スクロール ホイールをスパムして上下に動かすと、wheelDelta カウントが台無しになり、適切に動作できなくなると確信しています。

私は、Google の最初の 10 ページにある関数としての上下のスクロールに関連する実質的にすべてのリンクと、関連する SO に関するほとんどの質問を試しました。

私の主な目標は、スクロール機能です。

4

4 に答える 4

34

あなたのようなページをコーディングする必要があった後、この種のサイト用の単純なプラグインfullPage.js (ブログ記事)を作成しました。

これは最初のバージョンです。できる限り改善し続けます。たとえば、メニューから呼び出されるメソッドを追加すると便利です。各セクションに o hastags (#) を使用するなど。これは、自分のページで使用しているため、すぐに行う必要があります。

私のgithubアカウントでその使用法について詳しく知ることができます

リビング デモ: http://alvarotrigo.com/fullPage/

作業環境: (IE 8、Chrome、Firefox、Opera > 11、Safari、Touch デバイス)

それが役立つことを願っています！

于 2013-09-25T15:54:50.107 に答える
11

このスクリプトを試してください

$(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length -1) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });

フィドルのデモ

フルスクリーンデモ

于 2013-09-23T07:24:33.640 に答える
6

私は同様の問題の解決策をいじっています。

私の解決策は、ウィンドウがスクロールするときを監視することだけです。

if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {

「ページ」の最後を50px以上スクロールすると、jqueryはスクロールを次の「ページ」にアニメーション化します。

$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});

上にスクロールする場合も同様です。これには、マウス、キーボード、または JavaScript によるスクロールが含まれます。

http://jsfiddle.net/dLCwC/1/で完全なコードを確認してください。

多分それは誰かに役立つでしょう（そうかどうか教えてください）。

于 2013-12-10T01:38:35.613 に答える
-2

Make sure you don't have height:100% or height:100vh on the body. I had this exact same issue and the only thing that fixed it was removing this.

于 2016-07-09T17:29:35.967 に答える