SpreadJS製品ヘルプ
ピクセル単位によるスクロール
SpreadJS > 開発者の手引き > 機能 > ユーザーインタフェースの管理 > ピクセル単位によるスクロール

Spread.Sheetsでは、Excelと同様に正確なスクロールが拡張的にサポートされているので、ワークシートをさらに制御でき、スムーズで完璧なスクロールを行えます。

ユーザーは手動または自動でスプレッドシートをピクセル単位によるスクロールできます。手動でスクロールする場合は、ピクセルを設定し、スクロールバーの矢印ボタンを使用して、指定したピクセル数だけ水平または垂直方向にスプレッドシートをスクロールできます。自動でスクロールする場合は、垂直および水平方向をピクセル単位で設定して、指定したピクセルまで自動的にスクロールできます。

ピクセル単位によるスクロールのメリット

本機能は、ユーザーがワークシートのセル間をしっかりと移動できるようにすることで、ユーザーエクスペリエンスを向上させます。

次は、ピクセル単位によるスクロールを使用できるいくつかの例です。

サポートされるユーザー操作

ユーザーは、ピクセル単位で列を水平方向に、行を垂直方向にスクロールでき、両方の方向にピクセル単位でスクロールできます。

注意: ピクセル単位でスクロールする機能は、スクロールバー上のサムボタンをドラッグすることによるスクロール処理をサポートしていません。

Spread.Sheetsでは、ワークシートでピクセル単位でスクロールする機能を使用する際、次のマウスホイールとキーボードの操作がサポートされています。

ピクセル単位によるスクロールを有効する方法（手動モード）

デフォルトでは、ExcelとSpread.Sheetsの両方が行または列のみでスクロールします。ワークシートでピクセル単位スクロールを有効にするには、scrollByPixelプロパティを「true」に設定します。そうすると、スクロールバーの矢印ボタンを使用して、指定したピクセル数でスプレッドシートを手動でスクロールできます。

使用例

さまざまな国と特定の国の州の製品分析を示すスプレッドシートで作業しているとします。行と列をスクロールする際、特定の国の最後の項目（州）または最後の列（製品の詳細）を確認する場合があります。このようなとき、デフォルトのスクロールを使用すると、一度に行全体や列全体が飛び越されたりするため、操作全体が煩雑になります。

次の図は、ワークシートでピクセル単位によるスクロールを示します。

JavaScript
コードのコピー 
// ピクセル単位による正確なスクロールを有効にします。
spread.options.scrollByPixel = true;
spread.options.scrollPixel = 5;

注意： ピクセル単位によるスクロールでは、次のような制限があります。

コードの使用

次のコードは、カスタムのピクセルサイズを設定し、ワークシートの行と列をスクロールする方法を示します。

JavaScript
コードのコピー 
 <script>
 var data = [
 {
   "国": "Canada",
    "州": "Ontario",
    "市": "Ottawa",
    "製品": "Kraft Grated Parmesan Cheese"
 },
 {
    "国": "Canada",
    "州": "Ontario",
    "市": "Belleville",
    "製品": "KIND Bars Almond & Coconut Gluten Free"
 },
 {
     "国": "Canada",
     "州": "Ontario",
     "市": "Alliston",
     "製品": "Kraft Grated Parmesan Cheese"
  },
  {
     "国": "Canada",
     "州": "Saskatchewan",
     "市": "Prince Albert",
      "製品": "Smartfood Popcorn"
   },
   {
     "国": "Canada",
     "州": "Alberta",
     "市": "Red Deer",
     "製品": "Smartfood Popcorn"
   },
   {
     "国": "Canada",
     "州": "Alberta",
     "市": "Calgary",
     "製品": "Planters Deluxe Whole Cashew"
   },
   {
     "国": "Canada",
     "州": "Alberta",
     "市": "Calgary",
     "製品": "Kraft Grated Parmesan Cheese"
   },
   {
      "国": "Canada",
      "州": "Alberta",
      "市": "Okotoks",
      "製品": "Smartfood Popcorn"
   },
   {
      "国": "India",
      "州": "Andhra Pradesh",
      "市": "Hyderabad",
      "製品": "Teddy Grahams Crackers"
   },
   {
      "国": "South Africa",
      "州": "Gauteng",
      "市": "Roodepoort",
      "製品": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)"
   },
   {
      "国": "Finland",
      "州": "Ita-Suomen Laani",
      "市": "Kuopio",
      "製品": "Planters Deluxe Whole Cashew"
   },
   {
      "国": "Switzerland",
      "州": "Geneve",
      "市": "Vesenaz",
      "製品": "KIND Bars Almond & Coconut Gluten Free"
   },
   {
      "国": "Switzerland",
      "州": "Vaud",
      "市": "Lausanne",
      "製品": "Smartfood Popcorn"
   },
   {
     "国": "Switzerland",
     "州": "Vaud",
     "市": "Morges",
     "製品": "Kraft Real Mayo"
   },
   {
     "国": "Denmark",
     "州": "Frederiksborg",
     "市": "Helsingor",
     "製品": "Planters Deluxe Whole Cashew"
   },
   {
     "国": "Denmark",
     "州": "Kobenhavn",
     "市": "Kobenhavn",
     "製品": "Kraft Grated Parmesan Cheese"
   },
   {
     "国": "Denmark",
     "州": "Storstrom",
     "市": "Nakskov",
     "製品": "Kraft Grated Parmesan Cheese"
   }
   ]
</script>

<script>
$(document).ready(function ()
{
// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'),
{ sheetCount: 1 });
 
// activesheetを取得します。
var sheet = spread.getSheet(0);
spread.suspendPaint();
 
// ピクセル単位による正確なスクロールを有効にします。
spread.options.scrollByPixel = true;

// データソースを連結します。
sheet.setRowHeight(0, 30, 1);
sheet.autoGenerateColumns = false;
sheet.setDataSource(data);
var colInfos =
[
   { name: '国', size: 180 },
   { name: '州', size: 120 },
   { name: '市', size: 120 },
   { name: '製品', size: 280 }
];
 sheet.bindColumns(colInfos);

// 範囲を追加します。
var defaultStyle = sheet.getDefaultStyle();
defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.setDefaultStyle(defaultStyle);
var cc = sheet.getColumnCount(), rc = sheet.getRowCount();
for (var c = 0; c < cc; c++) {
var tempValue = null, tempRow = -1, tempRowCount = -1;
for (var r = 0; r < rc; r++) {
var cellValue = sheet.getValue(r, c);
if (tempValue == null)
{
tempValue = cellValue;
tempRow = r;
tempRowCount = 1;
}
else if (tempValue === cellValue)
{
 tempRowCount++;
 }
else {
  if (tempRowCount > 1)
 {
   sheet.addSpan(tempRow, c, tempRowCount, 1);
  }
  tempValue = cellValue;
  tempRow = r;
  tempRowCount = 1;
 }
 }
 if (tempRowCount > 1)
 {
  sheet.addSpan(tempRow, c, tempRowCount, 1);
 }
 }
spread.resumePaint();
// イベントを連結してscrollByPixelを設定します。
var scrollByPixel = document.getElementById("scrollByPixel");
scrollByPixel.addEventListener("change", function () {
spread.options.scrollByPixel = scrollByPixel.checked;
});
var scrollPixel = document.getElementById("scrollPixel");
document.getElementById("setScrollPixel").addEventListener("click", function ()
{
spread.options.scrollPixel = parseInt(scrollPixel.value);
});
});
</script>


ピクセル単位によるスクロールを有効する方法（自動モード）

ワークシートで自動的にピクセル単位スクロールを有効にするには、scrollメソッドを使用します。このメソッドは、垂直および水平方向をピクセル単位（vpixelsおよびhpixels）で設定して、指定したピクセルまで自動的にスクロールします。

また、scrollByPixelプロパティを使用して、以下の動作を実現することができます。

使用例

さまざまな国と特定の国の州の製品分析を示すスプレッドシートで作業しているとします。行と列をスクロールする際、1つの国に関するすべてのデータを表示するスプレッドシートの特定のビューポートを確認する場合があります。このようなとき、自動スクロールを使用して目的のデータを表示できます。

次の図は、ワークシートでピクセル単位による自動でスクロールを示します。

 

コードの使用

次のコードは、水平および垂直方向のカスタムのピクセルサイズを設定し、ワークシートの指定した位置にスクロールする方法を示します。

JavaScript
コードのコピー 
// activesheetを取得します。
var activeSheet = spread.getActiveSheet();
spread.options.scrollByPixel = true;
//これは、シートを下方向に30ピクセルに、右方向に15ピクセルに設定します。
activeSheet.scroll(30, 15);

 

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.