jQueryでスクロールを連動

どうも、もりもりです。

今回はjQueryで複数のコンテナにセットしたスクロールバーの動きを連動させる方法を紹介したいと思います。 ASP.NETでデータを一覧表示するにあたって、ヘッダはもちろん固定ですが列も一部を固定にしたいという要望が合ったので まずはHTMLでどうすれば良いかを検証します。

目次
■ まずはコンテナを４つに区切る
■ スクロールをコンテナにセット
■ スクロールバーを連動
■ スクロールバーを非表示
■ スクロールを高速化
■ OSによってはサイズ調整が必要
■ 全体ソース
■ さいごに

まずはコンテナを４つに区切る

一覧を下記の４つに区切ります。

• ヘッダ固定
• ヘッダスクロール
• データ部固定
• データ部スクロール

index.html

<div class="list">
    <div class="header">
        <div class="fixedHeader">
        </div>
        <div class="scrollHeader">
        </div>
    </div>
    <div class="dataList">
        <div class="fixedDataList">
        </div>
        <div class="scrollDataList">
        </div>
    </div>
</div>

スクロールをコンテナにセット

ヘッダスクロール部には横スクロール、データ固定部には縦スクロール、データスクロール部には縦横両方スクロールをセットします。

index.css

.scrollHeader {
    display: flex;
    flex-direction: row;
    max-width: 500px;
    overflow-x:scroll;
    overflow-y: hidden;
}
.fixedDataList {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    min-width: 204px;
    max-height: 200px;
}
.scrollDataList {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    max-width: 500px;
    max-height: 200px;
}

スクロールバーを連動

ヘッダのスクロールイベントで、横の位置をデータスクロール部の横の位置にセットします。 同様にデータ固定部とデータスクロール部のスクロールイベントにも連動させたいスクロール位置を合わせます。 これだけです。

index.js

var scrollHeader = $('.scrollHeader');
var fixedDataList = $('.fixedDataList');
var scrollDataList = $('.scrollDataList');

scrollHeader.scroll(function() {
    scrollDataList.scrollLeft(scrollHeader.scrollLeft());
});
fixedDataList.scroll(function() {
    scrollDataList.scrollTop(fixedDataList.scrollTop());
});
scrollDataList.scroll(function() {
    scrollHeader.scrollLeft(scrollDataList.scrollLeft());
    fixedDataList.scrollTop(scrollDataList.scrollTop());
});

スクロールバーを非表示

スクロールバーを非表示にするには下記のスタイルを追加。（Chrome、Edge、Safariで有効）

index.css

.scrollHeader::-webkit-scrollbar {
    display:none;
}
.fixedDataList::-webkit-scrollbar {
    display:none;
}

スクロールを高速化

PCによってはスクロールがもっさりと動くことも。そんな時は1行 will-change: transform; を追加するだけ。

index.css

.scrollHeader {
    display: flex;
    flex-direction: row;
    max-width: 500px;
    overflow-x:scroll;
    will-change: transform;
}
.fixedDataList {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    will-change: transform;
    min-width: 204px;
    max-height: 200px;
}
.scrollDataList {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    will-change: transform;
    max-width: 500px;
    max-height: 200px;
}

OSによってはサイズ調整が必要

Macではスクロールバーはコンテナ内に表示されますが、Windowsでは常に表示されます。 スタイルのscrollDataListのmax-widthとmax-heightを微調整してください。 だいたい17pxぐらいかな？

OSでそれぞれ対応するのが面倒ということでればいっそのことスクロールバーのスタイルを追加して常時表示するという手もありかと。 下記の全体ソースではスクロールバーのスタイルあり版にしてます。

全体ソース

全体はこんな感じです。

※表示幅の関係でスクロールバー分レイアウトが崩れてしまってます。 「0.5x」でご確認いただければと。

See the Pen InterlockedScroll by Y Mori (@ymdevx3) on CodePen.

さいごに

ここまでできたのでASP.NETのListViewで使いたい場合はLayoutTemplateやItemTemplateに落とし込むだけです。 ASP.NET開発においても最終的にできるHTMLを意識しておけば苦労することはないでしょう。

以上、もりもりでした。