scrollHint

更新日：2024/01/29

th1 th2 th3 th4 th5 th6 th7
texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttext texttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext texttexttexttext

my-snow-monkey.php

// ------------------------------------------------
// css読み込み
// ------------------------------------------------
add_action(
	'wp_enqueue_scripts',
	function() {
		// scrollHint
		wp_enqueue_style('scroll-hint-css', 'https://unpkg.com/scroll-hint@latest/css/scroll-hint.css', array(), false, 'all');
		
		wp_enqueue_style(
			'my-snow-monkey',
			MY_SNOW_MONKEY_URL . '/css/style.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( MY_SNOW_MONKEY_PATH . '/css/style.css' )
		);
	}
);

// ------------------------------------------------
// js読み込み
// ------------------------------------------------
add_action('wp_enqueue_scripts', 'msm_enqueue_style_script');
function msm_enqueue_style_script()
{
	// scrollHint
	wp_enqueue_script( 'scroll-hint-js', 'https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js', array( 'jquery' ), true);

	// js読み込み
	wp_enqueue_script(
		'msm_scripts',
		MY_SNOW_MONKEY_URL . '/js/script.js', // my-snow-monkeyフォルダのscript.cssの場合
		['jquery'],
		filemtime(MY_SNOW_MONKEY_PATH . '/js/script.js'),
		true
	);
}

jsファイル

(function($) {
      // scrollHint
      new ScrollHint('.js-scrollable');
})(jQuery);

htmlファイル

<style>
    .js-scrollable {
        overflow-x: scroll;
    }

    .js-scrollable th,
    .js-scrollable td {
        padding: 4px 8px;
        min-width: 180px;
        vertical-align: top;
    }
  </style>
  <div class="js-scrollable">
    <table border="1">
      <thead>
        <tr>
          <th>th1</th>
          <th>th2</th>
          <th>th3</th>
          <th>th4</th>
          <th>th5</th>
          <th>th6</th>
          <th>th7</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttext
          </td>
          <td>
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttext
          </td>
          <td>
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttext
          </td>
          <td>
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttext
          </td>
          <td>texttexttexttext</td>
          <td>
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttext
          </td>
          <td>
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttext
            texttexttexttext
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- /.js-scrollable -->
新規記事

すべてを見る
人気記事ランキング
SEOサンプル記事
話題のキーワードから探す