scrollHint

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 -->