ピクセル単位によるスクロール

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

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

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

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

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

スプレッドシートのセルが高すぎる（複数行テキストを含む）または長すぎる（列幅が大きい）場合。
行または列の端をつかんでサイズを変更する場合。
セル内に図形または画像を配置する場合。
単一のセルに大量のデータを入力する必要がある場合。たとえば、スプレッドシートの入力フォーム、アンケートフォーム、レコードなど。
タブレットや携帯電話などの小さな画面でワークシートをスクロールする場合。
スプレッドシート内の目的のデータを含むセルまたは特定のビューポートに移動する必要がある場合。

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

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

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

行のビューポートインデックスまたは列のビューポートインデックスが1であるビューポート領域のマウスホイール/トラックパッドホイールを使用します。
マウスホイールまたはトラックパッドを使用して、スクロールバーの「←」 /「→」/「↑」/「↓」ボタンをクリックします。
スクロールバーの「←」 /「→」/「↑」/「↓」ボタン、マウスホイール、またはトラックパッドを使用します。
ビューポート領域でタッチによるスクロールを使用します。
スクロールバーの「←」 /「→」/「↑」/「↓」ボタンまたはトラックボタンをタッチまたはタップします。

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

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

使用例

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

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

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

注意： ピクセル単位によるスクロールでは、次のような制限があります。
タッチ対応のデバイスでピクセル単位でスクロールする際、タッチ操作は境界域フィードバックと行または列全体へのスクロールをサポートしません。
スプレッドシートの印刷、またはPDFファイルへのエクスポートの際、ピクセル単位スクロールを使用できません。他の機能では、ピクセルスクロールが正常に使用できます。

コードの使用

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

 <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 });
 
// アクティブシートを取得します。
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）で設定して、指定したピクセルまで自動的にスクロールします。

正の数値を指定すると、ワークシートが指定したピクセル単位まで下方向と右方向にスクロールします。
負の数値を指定すると、ワークシートが指定したピクセル単位まで上方向と左方向にスクロールします。
0を指定すると、ワークシートがどの方向にもスクロールしません。

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

このプロパティをtrueに設定した場合、ワークシートは新しい先頭行または左列のインデックスと新しい先頭行または左列のオフセット（scrollメソッドで定義する）までスクロールします。
このプロパティをfalseに設定した場合、ワークシートは新しい先頭行または左列のインデックスト（scrollメソッドで定義する）までスクロールします。ただし、新しい先頭行または左列のオフセットが常に0になります。

使用例

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

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

Automatic pixel scrolling in a worksheet

コードの使用

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

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