Horizontal Scrollデモが動作しない
bokuweb opened this issue · 3 comments
私の固有の問題かもしれませんので、以下は参考レベルとしてください。
不要でしたら適宜クローズ願います
現状デフォルトオプションが以下となっており
// Default options
static defaults = {
// ...省略
verticalScroll: true, // Enable the vertical scroll
horizontalScroll: false, // Enable the horizontal scroll
// ...省略
}
horizontal.htmlで以下のように設定しています。
var sweetScroll = new SweetScroll({
horizontalScroll: true
});
そのためconstructorでmergeした際にhorizontalScroll
, verticalScroll
ともにtrue
となっているように見えます。
constructor(options = {}, container = "body, html") {
this.options = Util.merge({}, SweetScroll.defaults, options);
this.container = this._getContainer(container);
this.header = $(this.options.header);
this.el = $$(this.options.trigger);
this.tween = new ScrollTween(this.container);
this._bindContainerClick();
}
それによって以下でdirection
がy
となり、結果scrollableFind
がundefined
を返してるように見受けられます。
_getContainer(selector) {
const {verticalScroll, horizontalScroll} = this.options;
let direction;
if (verticalScroll || (verticalScroll && horizontalScroll)) {
direction = "y";
} else if (horizontalScroll) {
direction = "x";
}
return Dom.scrollableFind(selector, direction);
}
よって以下のようにすると動くんですが、こちらでしか再現してませんし、設計**からもはずれると思うので参考としてください。
horizontal.html
var sweetScroll = new SweetScroll({
verticalScroll: false
horizontalScroll: true
});
ありがとうございます! とっても参考になりました。
該当箇所、verticalScroll
、horizontaScroll
がどちらもtrue
の場合、縦横どちらか一方でもスクロールが出来ればコンテナを取得するように変更してみました。
_getContainer(selector) {
const {verticalScroll, horizontalScroll} = this.options;
let container;
if (verticalScroll) {
container = Dom.scrollableFind(selector, "y");
}
if (!container && horizontalScroll) {
container = Dom.scrollableFind(selector, "x");
}
return container;
}
こちらで再現出来ないのが怖いですが、DEMOの方にも反映したので、再度確認していただけると助かります。。
Horizontal Scroll | sweet-scroll.js
上記DEMOでは、以下の様にverticalScroll
をfalse
にしてもよかったのですが、どちらもtrue
の場合、縦スクロールが可能なコンテナしか返さないのは直感に反する感じがしましたので、上記の修正としてみました。
var sweetScroll = new SweetScroll({
verticalScroll: false
horizontalScroll: true
});
DEMO確認しました。動作しております!
良かったです。再現しないのが不明ですが・・。
ありがとうございます! ちゃんと動いているようでよかったです。。
npm
にも修正版(0.0.4
)を反映しました。
再現出来ないのが確かに謎でした...。