wadackel/sweet-scroll

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();
  }

それによって以下でdirectionyとなり、結果scrollableFindundefinedを返してるように見受けられます。

  _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
    });

ありがとうございます! とっても参考になりました。

該当箇所、verticalScrollhorizontaScrollがどちらも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では、以下の様にverticalScrollfalseにしてもよかったのですが、どちらもtrueの場合、縦スクロールが可能なコンテナしか返さないのは直感に反する感じがしましたので、上記の修正としてみました。

    var sweetScroll = new SweetScroll({
      verticalScroll: false
      horizontalScroll: true
    });

DEMO確認しました。動作しております!
良かったです。再現しないのが不明ですが・・。

ありがとうございます! ちゃんと動いているようでよかったです。。
npmにも修正版(0.0.4)を反映しました。
再現出来ないのが確かに謎でした...。