- このトピックには4件の返信、2人の参加者があり、最後に
により2年、 3ヶ月前に更新されました。
-
投稿
-
【お使いの 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は実際には書いたことがありません。### 試したこと
こちら等を参考にスクロールを作りましたが、初期位置に戻すことは分かりませんでした。
説明がわかりにくい場合誠に申し訳ございませんが、お伝えいただけますでしょうか。
お忙しいところ恐れ入りますが、何卒宜しくお願い申し上げます。いいねをした人: 居ませんご連絡ありがとうございます。
＞それぞれのスクロール箇所に制御用の class を追加して、ページをスクロールしたらそれらの class の scrollLeft を0にする、とかですかね。
→左様でございます。
それぞれにclassを追加し、ページをスクロールしたら現在触れている箇所以外は、全てスクロールする前の位置に戻す( scrollLeft を0というのでしょうか)という形です。
ある程度であれば制御可能なのでしょうか。その場合CSSとJSで実装する感じでしょうか。制御しないようにするか検討中でございます。
いいねをした人: 居ませんちょっと僕もスクロール処理が苦手なのでぱっとコードを提示することは難しいです、すみません。
スクロール時に処理を実行するコードは以下、
// ページがスクロールするたびに実行 window.addEventListener( 'scroll', () => { // ここに実行したいコード }, );要素のスクロール位置を制御するのは以下
// .target クラスを持つ要素を全取得 const targets = [].slice.call(document.querySelectorAll( '.target' )); // .target クラスを持つ要素の横スクロール位置を0にする targets.forEach((target) => { target.scrollLeft = 0; });でできるかと思いますので、組み合わせてトライアンドエラーでやってみてください！ ただ、繰り返しになりますがスクロール処理は扱いが難しいですし、ユーザーも使いづらくなることのほうが多いと思いますので、個人的には横スクロールをしないレイアウトにするのが良いと思います。
いいねをした人: 居ません
- トピック「スクロール表示の制御方法について」には新しい返信をつけることはできません。