scroll-hintをアコーディオンブロックの中身に適用したい

0
いいねをした人: 居ません
  • このトピックには6件の返信、2人の参加者があり、最後にアバター画像hiro8watanabeにより2ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #134071
    アバター画像hiro8watanabe
    参加者
    5

    【お使いの Snow Monkey のバージョン】25.2.4
    【お使いの Snow Monkey Blocks のバージョン】20.3.5
    【お使いの Snow Monkey Editor のバージョン】9.3.2
    【お使いのブラウザ】chrome

    ### 実現したいこと
    scroll-hintをアコーディオンブロックの中身に適用したい。

    ### 発生している問題
    scroll-hintをアコーディオンブロックの中身に適用したいのですが、何故か動作しません。
    別サイトでmy-snow-monkey.phpからフックで差し込んだtableでは正常に動いています。

    ### 試したこと
    CDNでだめだったのでダウンロードしてファイルを設置。ー>変わらず
    scroll-hint自体の読み込みも、その他CSSやjsファイルと合わせているので読み込まれていないはずはないと思われます。
    中身のtable自体はスクロールするようにcssで設定済み

    scroll-hintに使用するclassはアコーディオンブロックの中身のtableを囲っているfigureに設定しています。

    0
    いいねをした人: 居ません
    #134079
    キタジマ タカシ
    参加者
    2201

    実際に見てみないとわからないかなと思うので、ページの URL をここで共有してもらうことはできますか?

    0
    いいねをした人: 居ません
    #134089
    アバター画像hiro8watanabe
    参加者
    5

    ご返信ありがとうございます。

    こちらクライアントの許可など必要なので共有ができません。すみません。

    しかし、通常は問題なく実装出来るという事だと思いますので、my-snow-monkey.phpの読み込み順など、もう一度試してみます。

    1
    いいねをした人:
    #134468
    アバター画像hiro8watanabe
    参加者
    5

    お世話になっております。

    その後、読み込み方法やjsの記述など試してみたのですが、解決しませんでした。
    以下は関係ある3ファイルの記述例です。

    どこか見落としているおかしなところなどありますでしょうか?

    ==============================================================

    my-snow-monkey.php

    add_action(
    	'wp_enqueue_scripts',
    	function () {
    		/* scroll-hint.css読み込み */
    		// wp_enqueue_style(
    			// 'scroll-hint_css',
    			// 'https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css'
    		// );
    
    		// /* scroll-hint.js読み込み */
    		// wp_enqueue_script(
    			// 'scroll-hint_js',
    			// 'https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js',
    		// );
    
    		wp_enqueue_style(
    			'scroll-hint',
    			MY_SNOW_MONKEY_URL . '/override/dist/assets/css/scroll-hint.css',
    			[Framework\Helper::get_main_style_handle()],
    			filemtime(MY_SNOW_MONKEY_PATH . '/override/dist/assets/css/scroll-hint.css')
    		);
    
    		wp_enqueue_script(
    			'scroll-hint',
    			MY_SNOW_MONKEY_URL . '/override/dist/assets/js/scroll-hint.min.js',
    			['swiper_js'],
    			MY_SNOW_MONKEY_PATH . '/override/dist/assets/js/scroll-hint.min.js',
    		);
    	}
    );

    ===================================================================
    アコーディオンブロックの中身

    <div class="smb-accordion__item__body is-layout-constrained wp-block-accordion-item-is-layout-constrained">
    	<figure class="wp-block-table alignfull is-style-stripes is-scroll c-scroll-hint" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">
    		<table style="border-width:1px">
    			<tbody>
    			</tbody>
    		</table>
    	</figure>
    </div>

    =======================================================================

    js

    new ScrollHint(".c-scroll-hint", {
    	suggestiveShadow: true,
    	remainingTime: 5000,
    	i18n: {
    		scrollable: "スクロールできます",
    	},
    });
    0
    いいねをした人: 居ません
    #134485
    キタジマ タカシ
    参加者
    2201

    とりあえず上記のコードをこちらの環境には入れてみたのですが、わからなかったところがあるので教えてください。

    1. scroll-hint の js の依存関係に ['swiper_js'] が指定されています。この場合、swiper_js な js が読み込まれていないと scroll-hint も読み込まれないと思うのですが、そこは大丈夫でしょうか?

    2. デフォルトだとテーブルはコンテンツ幅を超えずに横スクロール自体をしない状態で表示されると思います。別途 CSS 等でテーブルの中身の折返しを無効化したりとか、セルの幅を指定したりとかして、テーブルがスクロールする状態にはしていますかね?

    0
    いいねをした人: 居ません
    #134486
    キタジマ タカシ
    参加者
    2201

    ちなみに、こちらの環境ではこれででました。

    document.addEventListener(
    	"DOMContentLoaded",
    	() => {
    		new ScrollHint(".c-scroll-hint", {
    			suggestiveShadow: true,
    			remainingTime: 5000,
    			i18n: {
    				scrollable: "スクロールできます",
    			},
    		});
    	}
    );
    0
    いいねをした人: 居ません
    #134495
    アバター画像hiro8watanabe
    参加者
    5

    ご返信ありがとうございます。

    情報不足ですみませんでした。
    swiper読み込み、CSSでの横スクロールは対応してありますが、jsの方で問題があったようです。

    document.addEventListener(“DOMContentLoaded”, () => {}

    上記で囲むのを完全に見落としていました。
    修正したところ、無事スクロールヒントの動作確認ができました。

    お忙しい中、ありがとうございました。
    トピック閉じさせていただきます。

    1
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「scroll-hintをアコーディオンブロックの中身に適用したい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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