2

問題の要約

動作する 2 次元スクロール コードを取得しました。そのようなスクロールは正常に機能しています。スクロールは任意の方向に行うことができます (水平方向のみ、または ti,e で垂直方向のみに制限されるのとは異なります) が、2 つの問題があります -

  • 表示領域を超えて上と左に向かってスクロールすると、スクロール可能な領域に戻りません。
  • 右と下にスクロールすると元に戻ります。

問題のデモ - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
注 - Webkit ブラウザー (Google chrome および Safari) でのみテストしてください。

私が探しているソリューション

  • どちらか、私のコードで何が間違っているかを指摘してください。
  • または、同じバージョンの iscroll を使用して、適切に実装された両方向のスクロール (水平 + 垂直) の動作デモを共有してください。私が使用している - バージョン 3.7.1、望ましい、または iscroll バージョン 4 も使用しています。
  • または、もちろん、任意のポインタをいただければ幸いです。

問題の説明

ここで動作コードを確認してください - http://jsfiddle.net/sandeepan_nits/pAhjU/6/

ノート -

  • Webkit ブラウザーのみでテストします (Google chrome および Safari)。
  • jsfiddle の HTML セクション内にすべてを故意に配置しました。これは、物事を完全に分離すると、スクロールが機能せず、正確にどこで機能しなくなるかわからないためです。ご指摘いただければありがたいです。

コード

ここにHTMLがあります -

<div class="header">
    <div class='left_link'></div>Demo</div>
    <div id="main_content" class="main_content">

    <b><div id=scroller1><br/> 
    <div class='center_data'>Scrollable area</div>
    <div class='center_data'>hello world!</div>
    <br/> 
    </div></b>

</div>

注 -無効な html があることはわかっています -<div id=scroller1>内部にあり、タグ<b></b>を削除する<b></b>と水平スクロールが機能しなくなる理由がわかりません -ここを確認してください。

これがjsです-

    var myScroll;
    var a = 0;
    function loaded() {
        //setHeight();  // Set the wrapper height. Not strictly needed, see setHeight() function below.

        // Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
        myScroll = new iScroll('scroller1', {desktopCompatibility:true});
        //myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});

    }


    // Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
    // If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    // Load iScroll when DOM content is ready.
    document.addEventListener('DOMContentLoaded', loaded, false);

その理由は、スクロール可能な div がデフォルトでスクロール可能な領域の右下隅にレンダリングされるためだと思います。しかし、それらを構成する適切な方法、つまりスクロール可能な領域内のスクロール可能な div をレンダリングする場所を設定する方法についてはわかりません。これまでのところ、水平スクロールと垂直スクロールの両方の方法で動作するデモは見つかりませんでした。

iscrollのドキュメントと多くの動作中のデモを確認しましたが、水平方向と垂直方向の両方でスクロールできるデモは見つかりませんでした。http://cubiq.org/iscrollの「Syntax」セクションの下にある「Accepted options are:」セクションを確認しましたが、これらのパラメーターはどれも私が探しているものではないようです。

他のもの

  • また、もう1つ、特定のスクロールデモを調べている間、クロムブラウザでdom要素で覆われた領域を表示できません。領域を表示するとは、DOM インスペクター パネルの上にマウスを移動すると、ブラウザー ビューで DOM が強調表示されることを意味します。表示されないときは？http://jsfiddle.net/sandeepan_nits/pAhjU/12/のように、検証済みの HTML で確認しました。

  • 誰かがタグを作成するiscrollかiscroll3、質問にタグを付け直すことができるようにしてください.

更新
スクロール領域が適切に表示画面内にある状態で通常の2次元スクロールを行いたいだけで、画面外に出ると跳ね返るはずです。現在、画面の外で上下左右にスクロールしても（私のjsfiddleでは）跳ね返ることはありません。右と下にスクロールすると跳ね返ります。スクロール領域を画面内にうまく配置したいだけです。バウンスバックは自動的に修正されると思います。

4

3 に答える 3

2

github リポジトリの最新バージョン (4.1.8)で問題が解決すると思います ;) 一部のプロジェクトで使用していますが、デスクトップ ブラウザ用に最適化されています ;)

編集

ドキュメントから：

hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.

デフォルトでは、新しい iScroll('idOfElement') を作成すると、スクロールは垂直および水平になります。これらのパラメーターで無効にすることができます。このビデオが示すように、デュアルスクロールは完全に可能です。

したがって、デュアル Scroll を強制するには:

var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});
于 2011-07-29T15:13:51.157 に答える
1

これは完全な解決策ではありませんが、これはあなたを助けるかもしれません。

まず、HTMLコードが適切にネストされていなかったため、<div>内部をに配置する必要がありました<b>。HTMLを少し修正しましたが、<b>

http://jsfiddle.net/Aexhz/

そして、適切にネストされたHTMLと正しい設定で、これはHTML / JS/CSSを分割した後でも機能しました

私にとっては、水平スクロールと垂直スクロールが表示されますが、それがどのようになりたいかはわかりません。クラス初期化行も編集しました

    myScroll = new iScroll('scroller1', {desktopCompatibility:true});

に

myScroll = new iScroll('scroller1', {
    snap: true,
    momentum: false,
    hScrollbar: false,
    vScrollbar: false,
    desktopCompatibility: true
});

これはあまり影響しませんが、私はまだそれを置きます。

私はこれを調査し続け、何か新しいものを見つけたら答えを更新します。

于 2011-07-27T16:27:53.947 に答える
0

iscorllを使用してこれを修正したいことは知っていますが、これをあなたと共有したかったので、それを使用して素晴らしい結果が得られました: http://jscrollpane.kelvinluck.com/#usage

css を使用して高度にカスタマイズできます。垂直および水平スクロールのデモはこちらです: http://jscrollpane.kelvinluck.com/basic.html

于 2011-08-03T09:06:11.287 に答える