ui.igScroll

ui.igScroll_image

igScroll は、すべてのデバイスでカスタム スクロールバーまたはネイティブ スクロールバーによりスムーズなスクロールをサポートする機能を持つ jQueryUI ウィジェットです。スクロールバーの外観およびスクロール動作を関連するオプションおよび CSS クラスを使用してカスタマイズできます。

このウィジェットのクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

以下のコード スニペットは、igScroll コントロールを初期化する方法を示します。

この API を使用して作業を開始するための情報はここをクリックしてください。コントロールに必要なスクリプトとテーマを参照する方法については、Ignite UI の JavaScript リソースの使用および Ignite UI のスタイリングとテーマをご覧ください。

コード サンプル

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
	<script src="js/infragistics.core.js" type="text/javascript"></script>
	<script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
	    $("#scrollableContent").igScroll({
				alwaysVisible:true,
				smoothing: true
	    });
    });
    </script>
</head>
<body>
	div id='scrContainerLeft' style="height:200px; width:500px; overflow: hidden;" tabIndex='0'>
		<div style="width: 800px;">
			<p>
			Lorem ipsum dolor sit amet, dicat maluisset urbanitas has id, consul admodum contentiones mel te. Nam paulo utinam qualisque in, lorem definiebas theophrastus mea ex. <br/>
			Scripta sanctus definitionem qui at. Erat fugit dicit at sea, ne quo alia illud viris. <br/>
			Latine legendos ut eum. Usu purto nihil dolor ei, has et iriure scripta, ex antiopam electram duo. <br/>
			</p>
			Te ludus malorum periculis has, no veri dissentiet sea. <br/>
			Probo lucilius an vel, his eu purto falli, populo graecis postulant has at. <br/>
			Suas sale mediocritatem in vis. Has noster semper perpetua in. Sed ex nostrum temporibus, affert interpretaris no pro. <br/>
			<p>
			Cu eirmod omnesque offendit per, invidunt corrumpit intellegebat duo et. <br/>
			Sed ne sonet apeirian. Cum at clita molestie democritum, diam expetenda ius ei. <br/>
			In est sale tamquam reformidans, dolore ponderum ius et. Te sea mutat hendrerit, habeo noster vis ad. <br/>
			Quem feugiat feugait usu id. His utinam apeirian in, repudiare accommodare ex mea, id qui modo mazim eleifend. <br/>
			</p>
			Cum elitr ludus ut. Eu mel aliquando conceptam adolescens. <br/>
			Malis vitae labore vis ea, eam an error accumsan. <br/>
			Ceteros sapientem assentior mel at, graeco ancillae moderatius ea eum. <br/>
			Ei nam delenit admodum deterruisset. <br/>
			<p>
			Cum ad animal oblique, sensibus reprehendunt his te, quo ignota dictas no. <br/>
			Eu congue lucilius mei, has ei invenire platonem. Cu nonumy tamquam moderatius cum. <br/>
			At lucilius deterruisset vis, omnis minimum complectitur ea his. <br/>
			</p>
		</div>
	</div>
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui-1.9.0.js
jquery.ui.widget.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js

継承

  • alwaysVisible

    タイプ:
    bool
    デフォルト:
    false

    スクロールバーがすべての環境で常に表示されるかどうかを取得または設定します。それ以外の場合、デフォルトの動作になります。注: このオプションは scrollbarType オプションによって設定されるカスタム スクロールバーのみに影響します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					alwaysVisible: true
				});

				//Get
					var alwaysVisible = $(".selector").igScroll("option", "alwaysVisible");

				//Set
				$(".selector").igScroll("option", "alwaysVisible", true);

  • bigIncrementStep

    タイプ:
    number
    デフォルト:
    null

    カスタム スクロールバー トラック領域を使用する場合、デフォルトのスクロール動作のステップを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					bigIncrementStep: 200
				});

				//Get
				var bigIncrementStep = $(".selector").igScroll("option", "bigIncrementStep");

				//Set
				$(".selector").igScroll("option", "bigIncrementStep", 200);

  • inertiaDeltaX

    タイプ:
    number
    デフォルト:
    1.25

    慣性が垂直方向ではなく水平方向のみにスクロールするために、水平方向の速度を速くする最小回数を取得または設定します。これは完璧な左右のスワイプではなく多少の上/下の移動を含むスワイプ操作を向上するためです。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					inertiaDeltaX: 1.5
				});

				//Get
				var inertiaDeltaX = $(".selector").igScroll("option", "inertiaDeltaX");

				//Set
				$(".selector").igScroll("option", "inertiaDeltaX", 1.5);

  • inertiaDeltaY

    タイプ:
    number
    デフォルト:
    2

    慣性が水平方向ではなく垂直方向のみにスクロールするために、垂直方向の速度を速くする最小回数を取得または設定します。これは完璧な上下のスワイプではなく多少の左/右の移動を含むスワイプ操作を向上するためです。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					inertiaDeltaY: 3
				});

				//Get
				var inertiaDeltaY = $(".selector").igScroll("option", "inertiaDeltaY");

				//Set
				$(".selector").igScroll("option", "inertiaDeltaY", 3);

  • inertiaDuration

    タイプ:
    number
    デフォルト:
    1

    モバイル デバイスで慣性がどれぐらいかかる修飾子を取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					inertiaDuration: 2
				});

				//Get
				var inertiaDuration = $(".selector").igScroll("option", "inertiaDuration");

				//Set
				$(".selector").igScroll("option", "inertiaDuration", 2);

  • inertiaStep

    タイプ:
    number
    デフォルト:
    1

    モバイル デバイスで慣性がスクロールする修飾子を取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					inertiaStep: 2
				});

				//Get
				var inertiaDuration = $(".selector").igScroll("option", "inertiaStep");

				//Set
				$(".selector").igScroll("option", "inertiaStep", 2);

  • language
    継承

    タイプ:
    string
    デフォルト:
    "en"

    ウィジェットのロケール言語設定を取得または設定します。

    コード サンプル

     
					//Initialize
				$(".selector").igScroll({
					language: "ja"
				});

				// Get
				var language = $(".selector").igScroll("option", "language");

				// Set
				$(".selector").igScroll("option", "language", "ja");

  • locale
    継承

    タイプ:
    object
    デフォルト:
    null

    ウィジェットのロケール設定を取得または設定します。

    コード サンプル

     
					//Initialize
				$(".selector").igScroll({
					locale: {}
				});

				// Get
				var locale = $(".selector").igScroll("option", "locale");

				// Set
				$(".selector").igScroll("option", "locale", {});

  • minThumbSize

    タイプ:
    enumeration
    デフォルト:
    15

    つまみドラッグの最小サイズをピクセルで取得または設定します。垂直のつまみの場合、最小の高さを指定します。水平のつまみの場合、最初の幅を指定します。scrollbarType が "custom" に設定される場合、カスタム スクロールバーのみに影響します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					minThumbSize: 20
				});
				//Get
					var minThumbSize = $(".selector").igScroll("option", "minThumbSize");
				//Set
				$(".selector").igScroll("option", "minThumbSize", 20);

  • modifyDOM

    タイプ:
    bool
    デフォルト:
    true

    igScroll が特定の要素で初期化されてコンテンツがスクロール可能な場合に、DOM を変更できるかどうかを設定または取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					modifyDOM: false
				});

				//Get
				var modifyDOM = $(".selector").igScroll("option", "modifyDOM");

  • regional
    継承

    タイプ:
    enumeration
    デフォルト:
    en-US

    ウィジェットの領域設定を取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igScroll("option", "regional");
				// Set
				$(".selector").igScroll("option", "regional", "ja");

  • scrollbarH

    タイプ:
    string
    デフォルト:
    null

    水平スクロールで使用される HTML 要素または jQuery 要素を取得または設定します。

    コード サンプル

     
				<div id='customHScroll' style='width:200px; overflow-x:auto;'>
					<div style='width:500px; height:1px;'></div>
				</div>

				//Initialize
				$(".selector").igScroll({
					scrollbarType: "none",
					scrollbarH: $("#customHScroll")
				});

				//Get
				var scrollbarH = $(".selector").igScroll("option", "scrollbarH");

  • scrollbarHParent

    タイプ:
    string
    デフォルト:
    null

    水平スクロールバーが追加される HTML 要素または jQuery 要素を取得または設定します。

    コード サンプル

     
				<div id='parentH'>
				</div>

				//Initialize
				$(".selector").igScroll({
					scrollbarHParent: $("#parentH")
				});

				//Get
				var scrollbarHParent = $(".selector").igScroll("option", "scrollbarHParent");

  • scrollbarType

    タイプ:
    enumeration
    デフォルト:
    custom

    すべての環境で igScroll を使用するスクロールバーの型を取得または設定します。

    メンバー

    • custom
    • タイプ:string
    • カスタム UI およびイベントを持つカスタム スクロールバー。
    • native
    • タイプ:string
    • ネイティブなスクロールバー。
    • none
    • タイプ:string
    • スクロールバーが表示しません。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					scrollbarType: "native"
				});
				//Get
					var scrollbarType = $(".selector").igScroll("option", "scrollbarType");
				//Set
				$(".selector").igScroll("option", "scrollbarType", "native");

  • scrollbarV

    タイプ:
    string
    デフォルト:
    null

    垂直スクロールで使用される HTML 要素または jQuery 要素を取得または設定します。

    コード サンプル

     
				<div id='customVScroll' style='height:200px; overflow-y:auto; float:left; position:relative;'>
					<div style='width:20px; height:500px;'></div>
				</div>

				//Initialize
				$(".selector").igScroll({
					scrollbarType: "none",
					scrollbarV:  $("#customVScroll")
				});

				//Get
				var scrollbarV = $(".selector").igScroll("option", "scrollbarV");

  • scrollbarVParent

    タイプ:
    string
    デフォルト:
    null

    垂直スクロールバーが追加される HTML 要素または jQuery 要素を取得または設定します。

    コード サンプル

     
				<div id='parentV'>
				</div>

				//Initialize
				$(".selector").igScroll({
					scrollbarVParent: $("#parentV")
				});

				//Get
				var scrollbarVParent = $(".selector").igScroll("option", "scrollbarVParent");

  • scrollHeight

    タイプ:
    number
    デフォルト:
    null

    コンテンツの実際の高さにカスタム値を設定します。スクロールで表示されるコンテンツを手動的に更新する場合に便利です。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					scrollHeight: 1000
				});

				//Get
				var scrollHeight = $(".selector").igScroll("option", "scrollHeight");

				//Set
				$(".selector").igScroll("option", "scrollHeight", 1000);

  • scrollLeft

    タイプ:
    number
    デフォルト:
    0

    コンテンツの現在の水平位置を取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					scrollLeft: 200
				});

				//Get
				var scrollLeft = $(".selector").igScroll("option", "scrollLeft");

				//Set
				$(".selector").igScroll("option", "scrollLeft", 200);

  • scrollOnlyHBar

    タイプ:
    bool
    デフォルト:
    false

    リンクされた水平スクロールバーのみが水平スクロールで使用されるかどうかを取得または設定します。注: この場合、リンクされたスクロールバーがスクロールされる動作を手動的に処理します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					scrollOnlyHBar: true
				});

				//Get
				var scrollOnlyHBar = $(".selector").igScroll("option", "scrollOnlyHBar");

				//Set
				$(".selector").igScroll("option", "scrollOnlyHBar", true);

  • scrollOnlyVBar

    タイプ:
    bool
    デフォルト:
    false

    リンクされた垂直スクロールバーのみが垂直スクロールで使用されるかどうかを取得または設定します。注: この場合、リンクされたスクロールバーがスクロールされる動作を手動的に処理します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					scrollOnlyVBar: true
				});

				//Get
				var scrollOnlyVBar = $(".selector").igScroll("option", "scrollOnlyVBar");

				//Set
				$(".selector").igScroll("option", "scrollOnlyVBar", true);

  • scrollTop

    タイプ:
    number
    デフォルト:
    0

    コンテンツの現在の垂直位置を取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					scrollTop: 200
				});

				//Get
				var scrollTop = $(".selector").igScroll("option", "scrollTop");

				//Set
				$(".selector").igScroll("option", "scrollTop", 200);

  • scrollWidth

    タイプ:
    number
    デフォルト:
    null

    コンテンツの実際の幅にカスタム値を設定します。スクロールで表示されるコンテンツを手動的に更新する場合に便利です。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					scrollWidth: 1200
				});

				//Get
				var scrollWidth = $(".selector").igScroll("option", "scrollWidth");

				//Set
				$(".selector").igScroll("option", "scrollWidth", 1200);

  • smallIncrementStep

    タイプ:
    number
    デフォルト:
    40

    カスタム スクロールバー矢印を使用する場合、デフォルトのスクロール動作のステップを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					smallIncrementStep: 25
				});

				//Get
				var smallIncrementStep = $(".selector").igScroll("option", "smallIncrementStep");

				//Set
				$(".selector").igScroll("option", "smallIncrementStep", 25);

  • smoothing

    タイプ:
    bool
    デフォルト:
    false

    マウス ホイールを使用する場合、小さい慣性を持つスムーズ スクロールを使用するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					smoothing: true
				});

				//Get
				var smoothing = $(".selector").igScroll("option", "smoothing");

				//Set
				$(".selector").igScroll("option", "smoothing", true);

  • smoothingDuration

    タイプ:
    number
    デフォルト:
    1

    マウス ホイールを一度使用した場合にスクロールのアニメーションが持続する時間の修飾子を取得または設定します。スムーズ スクロール動作のみで使用されます。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					smoothingDuration: 2
				});

				//Get
				var smoothingDuration = $(".selector").igScroll("option", "smoothingDuration");

				//Set
				$(".selector").igScroll("option", "smoothingDuration", 2);

  • smoothingStep

    タイプ:
    number
    デフォルト:
    1

    マウス ホイールを一度使用した場合にスクロールするピクセルを決定する修飾子を取得または設定します。スムーズ スクロール動作のみで使用されます。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					smoothingStep: 2
				});

				//Get
				var smoothingStep = $(".selector").igScroll("option", "smoothingStep");

				//Set
				$(".selector").igScroll("option", "smoothingStep", 2);

  • swipeToleranceX

    タイプ:
    number
    デフォルト:
    30

    最初に水平方向にスワイプすると、垂直方向移動で許可されるピクセル数を取得または設定します。上下にスワイプした際に多少の左/右の移動があっても左/右にスクロールしないためです。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					swipeToleranceX: 20
				});

				//Get
				var swipeToleranceX = $(".selector").igScroll("option", "swipeToleranceX");

				//Set
				$(".selector").igScroll("option", "swipeToleranceX", 20);

  • syncedElemsH

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    メイン コンテンツへ水平的にリンクされる要素を取得または設定します。コンテンツが X 軸でスクロールされる場合、それに応じてリンク要素がスクロールします。

    コード サンプル

     
				<div id='scrContainerLeft' style="width:200px; height:200px; overflow: hidden;">
					<div style="width:900px; height: 400px;">
					</div>
				<div>

				//Initialize
				$(".selector").igScroll({
					syncedElemsH: [$("#scrContainerLeft")]
				});

				//Get
				var syncedElemsH = $(".selector").igScroll("option", "syncedElemsH");

				//Set
				$(".selector").igScroll("option", "syncedElemsH", $("#scrContainerLeft"));

  • syncedElemsV

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    メイン コンテンツが垂直にリンクされる要素を取得または設定します。コンテンツが Y 軸でスクロールされる場合、それに応じてリンク要素がスクロールします。

    コード サンプル

     
				<div id='scrContainerLeft' style="width:200px; height:200px; overflow: hidden;">
					<div style="width:900px; height: 400px;">
					</div>
				<div>

				//Initialize
				$(".selector").igScroll({
					syncedElemsV: [$("#scrContainerLeft")]
				});

				//Get
				var syncedElemsV = $(".selector").igScroll("option", "syncedElemsV");

				//Set
				$(".selector").igScroll("option", "syncedElemsV", $("#scrContainerLeft"));

  • wheelStep

    タイプ:
    number
    デフォルト:
    50

    マウス ホイールを使用する場合、デフォルトのスクロール動作のステップを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igScroll({
					wheelStep: 200
				});

				//Get
				var wheelStep = $(".selector").igScroll("option", "wheelStep");

				//Set
				$(".selector").igScroll("option", "wheelStep", 200);

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

  • rendered

    キャンセル可能:
    false

    スクローラーがすべて描画された後に発生するイベント。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

        • originalEvent
          タイプ: Event

          (evt の null を検証を持つ) ブラウザーのイベントへの参照を取得します。

    • args
      タイプ: Object

        • owner
          タイプ: Event

          igScroll への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igscrollrendered", ".selector", function (evt, args) {
					//return reference to igScroll
					args.owner;
				});

				//Initialize
				$(".selector").igScroll({
					rendered: function(evt, args) {...}
				});

  • resized

    キャンセル可能:
    false

    igScroll のサイズ変更が完了した後に発生するイベント。
    関数は引数 evt および args を取ります。
    evt.originalEvent (evt の null を検証) を使用してブラウザーのイベントへの参照を取得します。
    args.owner を使用して igScroll への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igscrollresized", ".selector", function (evt, args) {
					//return reference to igScroll
					args.owner;
				});

				//Initialize
				$(".selector").igScroll({
					resized: function(evt, args) {...}
				});

  • resizing

    キャンセル可能:
    true

    igScroll は要素がサイズ変更されていることを検出するときに発生するイベント。
    関数は引数 evt および args を取ります。
    evt.originalEvent (evt の null を検証) を使用してブラウザーのイベントへの参照を取得します。
    args.owner を使用して igScroll への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igscrollresizing", ".selector", function (evt, args) {
					//return reference to igScroll
					args.owner;
				});

				//Initialize
				$(".selector").igScroll({
					resizing: function(evt, args) {...}
				});

  • scrolled

    キャンセル可能:
    false

    スクロールが停止した後に発生するイベント。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

        • originalEvent
          タイプ: Event

          (evt の null を検証を持つ) ブラウザーのイベントへの参照を取得します。

    • args
      タイプ: Object

        • owner
          タイプ: Object

          igScroll への参照を取得します。

        • smallIncrement
          タイプ: Number

          コンテンツが矢印でスクロールされるかどうかを取得します。0 - 使用なし、-1 - 上矢印/左、1 - 下矢印/右。

        • bigIncrement
          タイプ: Number

          コンテンツがスクロールバー トラック領域でスクロールされるかどうかを取得します。0 - 使用なし、-1 - 上スクロール/左、1 - 下スクロール/右。

        • horizontal
          タイプ: Bool

          スクロールに使用されている軸を取得します。horizontal(true) または vertical(false)。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igscrollscrolled", ".selector", function (evt, args) {
					//return reference to igScroll
					args.owner;
					//returns if the content is scrolled by the arrow : 0 - none used, -1 - Arrow Up/Left, 1 - Arrow Down/Right.
					args.smallIncrement
					//returns if the content is scrolled by the scrollbar track areas: 0 - none used, -1 - Scrolled Up/Left, 1 - Scrolled Down/Right.
					args.bigIncrement
					//returns which axis is being used to scroll - horizontal(true) or vertical(false).
					args.horizontal
				});

				//Initialize
				$(".selector").igScroll({
					scrolled: function(evt, args) {...}
				});

  • scrolling

    キャンセル可能:
    true

    スクロール慣性がある場合にスクロールの前または各ステップの前に発生するイベント。
    アクションをキャンセルするには、false を返します。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

        • originalEvent
          タイプ: Event

          (evt の null を検証を持つ) ブラウザーのイベントへの参照を取得します。

    • args
      タイプ: Object

        • owner
          タイプ: Object

          igScroll への参照を取得します。

        • smallIncrement
          タイプ: Number

          コンテンツが矢印でスクロールされるかどうかを取得します。0 - 使用なし、-1 - 上矢印/左、1 - 下矢印/右。

        • bigIncrement
          タイプ: Number

          コンテンツがスクロールバー トラック領域でスクロールされるかどうかを取得します。0 - 使用なし、-1 - 上スクロール/左、1 - 下スクロール/右。

        • horizontal
          タイプ: Bool

          スクロールに使用されている軸を取得します。horizontal(true) または vertical(false)。

        • stepX
          タイプ: Number

          コンテンツが水平にスクロールされる量を取得します。

        • stepY
          タイプ: Number

          コンテンツが垂直にスクロールされる量を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igscrollscrolling", ".selector", function (evt, args) {
					//return reference to igScroll
					args.owner;
					//returns if the content is scrolled by the arrow : 0 - none used, -1 - Arrow Up/Left, 1 - Arrow Down/Right.
					args.smallIncrement
					//returns if the content is scrolled by the scrollbar track areas: 0 - none used, -1 - Scrolled Up/Left, 1 - Scrolled Down/Right.
					args.bigIncrement
					//returns which axis is being used to scroll - horizontal(true) or vertical(false).
					args.horizontal
					//returns how much the content will be scrolled horizontally
					args.stepX
					//returns how much the content will be scrolled vertically
					args.stepY
				});

				//Initialize
				$(".selector").igScroll({
					scrolling: function(evt, args) {...}
				});

  • thumbDragEnd

    キャンセル可能:
    false

    スクロールバーのつまみドラッグからマウスアップを発生するイベント。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

        • originalEvent
          タイプ: Event

          (evt の null を検証を持つ) ブラウザーのイベントへの参照を取得します。

    • args
      タイプ: Object

        • owner
          タイプ: Object

          igScroll への参照を取得します。

        • horizontal
          タイプ: Bool

          使用されるスクロールつまみを取得します。horizontal(true) または vertical(false)。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igscrollthumbdragend", ".selector", function (evt, args) {
					//return reference to igScroll
					args.owner;
					//returns which axis is being used to scroll - horizontal(true) or vertical(false).
					args.horizontal
				});

				//Initialize
				$(".selector").igScroll({
					thumbDragEnd: function(evt, args) {...}
				});

  • thumbDragMove

    キャンセル可能:
    true

    つまみドラッグが移動しているときに発生するイベント。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

        • originalEvent
          タイプ: Event

          (evt の null を検証を持つ) ブラウザーのイベントへの参照を取得します。

    • args
      タイプ: Object

        • owner
          タイプ: Object

          igScroll への参照を取得します。

        • horizontal
          タイプ: Bool

          使用されるスクロールつまみを取得します。horizontal(true) または vertical(false)。

        • stepX
          タイプ: Number

          コンテンツが水平にスクロールされる量を取得します。

        • stepY
          タイプ: Number

          コンテンツが垂直にスクロールされる量を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igscrollthumbdragmove", ".selector", function (evt, args) {
					//return reference to igScroll
					args.owner;
					//returns which axis is being used to scroll - horizontal(true) or vertical(false).
					args.horizontal
					//returns how much the content will be scrolled horizontally
					args.stepX
					//returns how much the content will be scrolled vertically
					args.stepY
				});

				//Initialize
				$(".selector").igScroll({
					thumbDragMove: function(evt, args) {...}
				});

  • thumbDragStart

    キャンセル可能:
    false

    スクロールバーのつまみドラッグからマウス クリックを発生するイベント。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

        • originalEvent
          タイプ: Event

          (evt の null を検証を持つ) ブラウザーのイベントへの参照を取得します。

    • args
      タイプ: Object

        • owner
          タイプ: Object

          igScroll への参照を取得します。

        • horizontal
          タイプ: Bool

          スクロールに使用されている軸を取得します。horizontal(true) または vertical(false)。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igscrollthumbdragstart", ".selector", function (evt, args) {
					//return reference to igScroll
					args.owner;
					//returns which axis is being used to scroll - horizontal(true) or vertical(false).
					args.horizontal
				});

				//Initialize
				$(".selector").igScroll({
					thumbDragStart: function(evt, args) {...}
				});

  • changeGlobalLanguage
    継承

    .igScroll( "changeGlobalLanguage" );

    ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。

    コード サンプル

     
				$(".selector").igScroll("changeGlobalLanguage");

  • changeGlobalRegional
    継承

    .igScroll( "changeGlobalRegional" );

    ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。

    コード サンプル

     
				$(".selector").igScroll("changeGlobalRegional");

  • changeLocale

    .igScroll( "changeLocale" );

    このメソッドは基本メソッドをオーバーライドし、スクロール コンテナーがコンテナー ロケールを変更しないため、何もしません。
    注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを使用してください。

    コード サンプル

     
				$(".selector").igScroll("changeLocale");

  • destroy

    .igScroll( "destroy" );

    コード サンプル

     
				$(".selector").igScroll("destroy");

  • option

    .igScroll( "option", optionName:object, value:object );

    • optionName
    • タイプ:object
    • value
    • タイプ:object

  • refresh

    .igScroll( "refresh" );

    コード サンプル

     
				$(".selector").igScroll("refresh");

  • igscroll-select-disabled

    ドラッグ操作で選択を回避する要素に適用されるクラス。

  • igscroll-harrow

    カスタム水平スクロールバーの矢印に適用されるクラス。

  • igscroll-harrow-hidden

    カスタム水平スクロールバーの矢印が非表示のときに適用されるクラス。

  • igscroll-leftarrow

    カスタム水平スクロールバーの左矢印に適用されるクラス。

  • igscroll-rightarrow

    カスタム水平スクロールバーの右矢印に適用されるクラス。

  • igscroll-rightarrow-single

    垂直スクロールバーが表示されていないときにカスタム水平スクロールバーの右矢印に適用されるクラス。

  • igscroll-hcontainer

    カスタム水平スクロールバーのコンテナーに適用されるクラス。

  • igscroll-hdrag

    カスタム水平スクロールバーのつまみドラッグに適用されるクラス。

  • igscroll-hdrag-big

    カスタム水平スクロールバーのつまみが大きいフォームであるときに適用されるクラス。

  • igscroll-hdrag-hidden

    以前細い形式で表示され、現在は非表示のカスタム水平スクロールバーのつまみに適用されるクラス。

  • igscroll-hdrag-thin

    カスタム水平スクロールバーのつまみが狭いフォームであるときに適用されるクラス。

  • igscroll-htrack

    カスタム水平スクロールバーのトラックに適用されるクラス。

  • igscroll-htrack-single

    垂直スクロールバーが表示されているときにカスタム水平スクロールバーのトラックに適用されるクラス。

  • igscroll-hnative-inner

    ネイティブ水平スクロールバーの内部要素に適用されるクラス。

  • igscroll-hnative-outer

    ネイティブ水平スクロールバーの外部要素に適用されるクラス。

  • igscroll-hnative-outer-single

    ネイティブ水平スクロールバーの外部要素に適用されるクラス。

  • igscroll-filler

    スクロールバーの間の領域の塗りつぶし要素に適用されるクラス。

  • igscroll-vnative-inner

    ネイティブ垂直スクロールバーの内部要素に適用されるクラス。

  • igscroll-vnative-outer

    ネイティブ垂直スクロールバーの外部要素に適用されるクラス。

  • igscroll-vnative-outer-single

    ネイティブ垂直スクロールバーの外部要素に適用されるクラス。

  • igscroll-scrollable

    igScroll がインスタンスを作成する要素に適用されるクラス。

  • igscroll-container

    スクロール コンテナーに適用されるクラス。

  • igscroll-content

    スクロール コンテンツ ラッパーに適用されるクラス。

  • igscroll-hsynced-content

    水平方向にリンクされる要素のコンテンツを折り返す要素に適用されるクラス。

  • igscroll-vsynced-content

    垂直方向にリンクされる要素のコンテンツを折り返す要素に適用されるクラス。

  • igscroll-touchscrollable

    igScroll がインスタンスを作成する要素に適用されるタッチ スクロールに関連するクラス。

  • igscroll-varrow

    カスタム垂直スクロールバーの矢印に適用されるクラス。

  • igscroll-downarrow

    カスタム垂直スクロールバーの下矢印に適用されるクラス。

  • igscroll-downarrow-single

    水平スクロールバーが表示されていないときにカスタム垂直スクロールバーの下矢印に適用されるクラス。

  • igscroll-varrow-hidden

    カスタム垂直スクロールバーの矢印が非表示のときに適用されるクラス。

  • igscroll-uparrow

    カスタム垂直スクロールバーの上矢印に適用されるクラス。

  • igscroll-vcontainer

    カスタム垂直スクロールバーのコンテナーに適用されるクラス。

  • igscroll-vdrag

    カスタム垂直スクロールバーのつまみドラッグに適用されるクラス。

  • igscroll-vdrag-big

    カスタム垂直スクロールバーのつまみが大きいフォームであるときに適用されるクラス。

  • igscroll-vdrag-hidden

    カスタム垂直スクロールバーのつまみが非表示されますが、以前に狭いフォームで表示されるときに適用されるクラス。

  • igscroll-vdrag-thin

    カスタム垂直スクロールバーのつまみが狭いフォームであるときに適用されるクラス。

  • igscroll-vtrack

    カスタム垂直スクロールバーのトラックに適用されるクラス。

  • igscroll-vtrack-single

    水平スクロールバーが表示されているときにカスタム垂直スクロールバーのトラックに適用されるクラス。

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.