0

非常に巨大な html ページ (7000*5000 など) があり、JavaScript を使用してそのページの周りにユーザーのビューを移動する必要があります。

ブラウザーのスクロールバーを削除することで (html でオーバーフロー:非表示)、ユーザーが自分で動き回ることが簡単にできなくなります。次に行う必要があるのは、js/jquery でその巨大なページの周りの「カメラ」の動きを制御することです。

スムーズなjQueryスクロールを備えたアンカーを使用することを除けば、多くの検索を行ってもWeb上で何も見つかりませんでした。これは（非常にきれいでなくても）垂直方向に移動しても問題ありませんが、実行するのは非常に複雑になります水平にします。

これを行う方法はありますか？

どうもありがとう ：）

4

5 に答える 5

2

jQuery scrollTo および localScroll プラグインは、これに最適です。オプションについてはhttp://flesler.blogspot.co.uk/2007/10/jquerylocalscroll-10.htmlを、デモについてはhttp://demos.flesler.com/jquery/scrollTo/をご覧ください。

プラグインを使用すると、アニメーションをキューに入れ、水平方向と垂直方向に同時にスクロールするか、垂直方向にスクロールしてから水平方向にスクロールするかなどの設定を定義できます。

ニール

于 2012-05-15T21:55:15.280 に答える
1

主な周囲の要素、div、またはセクションが実際にある場合は、固定しすぎて設定してください。ブラウザのウィンドウを実際にスクロールする代わりに、画面上にあるものを再配置して、スクロールの効果を与えます。ユーザーは違いを知りません。

于 2012-05-15T21:56:10.113 に答える
0

jQueryのアニメーション関数を調べてください。多分あなたはこのようなことをすることができます：

function movePage(newTop, newLeft){
    $('#pageview').animate({left:newLeft + "px", top: newTop + "px"});
}

ページを移動するタイミングの説明を使用して質問を更新してください。さらにサポートさせていただきます。

于 2012-05-15T21:51:43.300 に答える
0

コンテンツが周囲の長方形をオーバーフローした場合でも、CSSでスクロールバーが表示されているかどうかに関係なく、JSでスクロールできます。

window.scrollTo()ウィンドウ全体で、とその派生物を使用できます。

単一のDOM要素の場合、これはscrollLeftandscrollTopプロパティを設定することで実現できます。

どちらの方法でも、（jQuery）アニメーションを作成できます。確かに、それを実現するためのプラグインがすでにいくつかあります。たとえば、jQuery.ScrollToを見つけましたが、おそらく組み込みのメソッド.scrollLeft()であり.scrollTop()、目的には十分です。コメントでも次のようなもの

 $(someSelector).animate({scrollLeft: someNumber}, 'slow');

言及されています。

于 2012-05-15T22:09:59.507 に答える
0

自分で何かをしたい場合は、次のようなことができます。

var targetOffset = $('#post-10').offset().top ;
var scrollElem = scrollableElement('html', 'body');

$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
    // scroll is complete
      location.hash = 'post-10';
});

   // Use the first element that is "scrollable"  (cross-browser fix?)
function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
        var el = arguments[i],
        $scrollElement = $(el);
        if ($scrollElement.scrollTop()> 0) {
            return el;
        } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
                return el;
            }
        }
    }
    return [];
}

縦スクロール用です。

水平スクロールの場合、次のことができます。

  var targetOffset = $('#post-10').offset().left ;
    var scrollElem = scrollableElement('html', 'body');

    $(scrollElem).animate({scrollLeft: targetOffset}, 400, function() {
        // scroll is complete
          location.hash = 'post-10';
    });

多くの効果を備えた素敵な水平/垂直スクロールには、このプラグインを強くお勧めします.

http://demos.flesler.com/jquery/scrollTo/

于 2012-05-17T17:25:13.030 に答える