Ignite UI™ API ヘルプ

ui.igScroll

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>
        

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

デフォルト:

defaults

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

コードサンプル

//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 イベントオブジェクト。
args
タイプ: Object

コードサンプル

//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 イベントオブジェクト。
args
タイプ: Object

コードサンプル

//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 イベントオブジェクト。
args
タイプ: Object

コードサンプル

//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 イベントオブジェクト。
args
タイプ: Object

コードサンプル

//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 イベントオブジェクト。
args
タイプ: Object

コードサンプル

//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 イベントオブジェクト。
args
タイプ: Object

コードサンプル

//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

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

Ignite UI for jQuery | API リファレンス

ui.igScroll

コード サンプル

関連サンプル

関連トピック

依存関係

継承

コードサンプル