[hiro8watanabe]

【お使いの 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

いいねをした人: 居ません

[キタジマ タカシ]

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

♥ 0

いいねをした人: 居ません

[hiro8watanabe]

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

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

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

♥ 1

いいねをした人:

[hiro8watanabe]

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

その後、読み込み方法や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

いいねをした人: 居ません

[キタジマ タカシ]

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

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

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

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

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

document.addEventListener(
	"DOMContentLoaded",
	() => {
		new ScrollHint(".c-scroll-hint", {
			suggestiveShadow: true,
			remainingTime: 5000,
			i18n: {
				scrollable: "スクロールできます",
			},
		});
	}
);

♥ 0

いいねをした人: 居ません

[hiro8watanabe]

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

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

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

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

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

♥ 1

いいねをした人:

[投稿者]

投稿