スクロール表示の制御方法について

0
いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #95875
    よっぴー
    閲覧者
    7

    【お使いの Snow Monkey のバージョン】15.15.0
    【お使いの Snow Monkey Blocks のバージョン】13.2.1
    【お使いの Snow Monkey Editor のバージョン】 6.2.1
    【お使いのブラウザ】chrome,IE
    【当該サイトのURL】http://xs157698.xsrv.jp/demosite/product_introduction/product_list/

     

    ### 実現したいこと
    現在、スマホ版のスクロール表示の制御方法を探しております。(PCでは制御の必要なし)
    具体的には、下図のようなイメージです。


    一番トップにある製品アイコン一覧から下に、10個のスクロール箇所があります。
    (バイアル, アンプル, シリンジ, ボトル一段目, ボトル二段目, パウチ, チューブ, BIB, タンク, カプセル)
    その10個全てに制御をする必要があります。
    以下、制御の具体的な内容です。
    1. 10箇所のどこかをスクロールする
    2. スクロール直後に、1.の箇所以外をスクロールすれば
    3. 1.で触れた箇所を、「スクロール前の初期位置」に戻す

     

    ### 発生している問題
    現在スクロールを初期位置に戻す作業を試みましたが、なかなか上手くできません。
    子テーマかmySnowMonkeyは使用したことがありますが、phpは実際には書いたことがありません。

     

    ### 試したこと

    こちら等を参考にスクロールを作りましたが、初期位置に戻すことは分かりませんでした。
    説明がわかりにくい場合誠に申し訳ございませんが、お伝えいただけますでしょうか。
    お忙しいところ恐れ入りますが、何卒宜しくお願い申し上げます。

    0
    いいねをした人: 居ません
    #95878
    アバター画像キタジマ タカシ
    参加者
    2371

    それぞれのスクロール箇所に制御用の class を追加して、ページをスクロールしたらそれらの classscrollLeft を0にする、とかですかね。

    実際のところ、スクロールの制御を完璧にするのはかなり難しいです。ユーザーも意図しない挙動になったと感じて操作しにくくなることのほうが多いと思います。個人的にはスクロールが不要なレイアウトにするのが良いと思います。

    0
    いいねをした人: 居ません
    #95933
    よっぴー
    閲覧者
    7

    ご連絡ありがとうございます。

    >それぞれのスクロール箇所に制御用の class を追加して、ページをスクロールしたらそれらの class の scrollLeft を0にする、とかですかね。
    →左様でございます。
    それぞれにclassを追加し、ページをスクロールしたら現在触れている箇所以外は、全てスクロールする前の位置に戻す( scrollLeft を0というのでしょうか)という形です。
    ある程度であれば制御可能なのでしょうか。その場合CSSとJSで実装する感じでしょうか。

     

    制御しないようにするか検討中でございます。

    0
    いいねをした人: 居ません
    #96152
    アバター画像キタジマ タカシ
    参加者
    2371

    ちょっと僕もスクロール処理が苦手なのでぱっとコードを提示することは難しいです、すみません。

    スクロール時に処理を実行するコードは以下、

    // ページがスクロールするたびに実行
    window.addEventListener(
      'scroll',
      () => {
        // ここに実行したいコード
      },
    );

    要素のスクロール位置を制御するのは以下

    // .target クラスを持つ要素を全取得
    const targets = [].slice.call(document.querySelectorAll( '.target' ));
    // .target クラスを持つ要素の横スクロール位置を0にする
    targets.forEach((target) => {
      target.scrollLeft = 0;
    });

    でできるかと思いますので、組み合わせてトライアンドエラーでやってみてください! ただ、繰り返しになりますがスクロール処理は扱いが難しいですし、ユーザーも使いづらくなることのほうが多いと思いますので、個人的には横スクロールをしないレイアウトにするのが良いと思います。

    0
    いいねをした人: 居ません
    #96437
    よっぴー
    閲覧者
    7

    遅くなり申し訳ございません、

    かしこまりました、ユーザーが使いやすいように考えてみます。

    ご丁寧にありがとうございます。m(_ _)m

    1
    いいねをした人:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「スクロール表示の制御方法について」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。