https://www.hankyu.co.jp/common/js/scroll-hint.js

1(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ScrollHint = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2
3'use strict';
4
5function assign(target, firstSource) {
6  if (target === undefined || target === null) {
7    throw new TypeError('Cannot convert first argument to object');
8  }
9
10  var to = Object(target);
11  for (var i = 1; i < arguments.length; i++) {
12    var nextSource = arguments[i];
13    if (nextSource === undefined || nextSource === null) {
14      continue;
15    }
16
17    var keysArray = Object.keys(Object(nextSource));
18    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
19      var nextKey = keysArray[nextIndex];
20      var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
21      if (desc !== undefined && desc.enumerable) {
22        to[nextKey] = nextSource[nextKey];
23      }
24    }
25  }
26  return to;
27}
28
29function polyfill() {
30  if (!Object.assign) {
31    Object.defineProperty(Object, 'assign', {
32      enumerable: false,
33      configurable: true,
34      writable: true,
35      value: assign
36    });
37  }
38}
39
40module.exports = {
41  assign: assign,
42  polyfill: polyfill
43};
44
45},{}],2:[function(require,module,exports){
46'use strict';
47
48Object.defineProperty(exports, "__esModule", {
49  value: true
50});
51
52var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
53
54var _es6ObjectAssign = require('es6-object-assign');
55
56var _util = require('./util');
57
58function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
59
60var defaults = {
61  suggestClass: 'is-active',
62  scrollableClass: 'is-scrollable',
63  scrollableRightClass: 'is-right-scrollable',
64  scrollableLeftClass: 'is-left-scrollable',
65  scrollHintClass: 'scroll-hint',
66  scrollHintIconClass: 'scroll-hint-icon',
67  scrollHintIconAppendClass: '', // 'scroll-hint-icon-white'
68  scrollHintIconWrapClass: 'scroll-hint-icon-wrap',
69  scrollHintText: 'scroll-hint-text',
70  scrollHintBorderWidth: 10,
71  remainingTime: -1,
72  enableOverflowScrolling: true,
73  applyToParents: false,
74  suggestiveShadow: false,
75  offset: 0,
76  i18n: {
77    scrollable: 'スクロールできます'
78  }
79};
80
81var ScrollHint = function () {
82  function ScrollHint(ele, option) {
83    var _this = this;
84
85    _classCallCheck(this, ScrollHint);
86
87    this.opt = (0, _es6ObjectAssign.assign)({}, defaults, option);
88    this.items = [];
89    var elements = typeof ele === 'string' ? document.querySelectorAll(ele) : ele;
90    var applyToParents = this.opt.applyToParents;
91
92    [].forEach.call(elements, function (element) {
93      if (applyToParents) {
94        element = element.parentElement;
95      }
96      element.style.position = 'relative';
97      element.style.overflow = 'auto';
98      if (_this.opt.enableOverflowScrolling) {
99        if ('overflowScrolling' in element.style) {
100          element.style.overflowScrolling = 'touch';
101        } else if ('webkitOverflowScrolling' in element.style) {
102          element.style.webkitOverflowScrolling = 'touch';
103        }
104      }
105      var item = {
106        element: element,
107        scrolledIn: false,
108        interacted: false
109      };
110      document.addEventListener('scroll', function (e) {
111        if (e.target === element) {
112          item.interacted = true;
113          _this.updateItem(item);
114        }
115      }, true);
116      (0, _util.addClass)(element, _this.opt.scrollHintClass);
117      (0, _util.append)(element, '<div class="' + _this.opt.scrollHintIconWrapClass + '" data-target="scrollable-icon">

117\n        <span class="' + _this.opt.scrollHintIconClass + (_this.opt.scrollHintIconAppendClass ? ' ' + _this.opt.scrollHintIconAppendClass : '') + '">\n          <div class="' + _this.opt.scrollHintText + '">' + _this.opt.i18n.scrollable + '</div>\n        </span>\n      </div>');
118      _this.items.push(item);
119    });
120    window.addEventListener('scroll', function () {
121      _this.updateItems();
122    });
123    window.addEventListener('resize', function () {
124      _this.updateItems();
125    });
126    this.updateItems();
127  }
128
129  _createClass(ScrollHint, [{
130    key: 'isScrollable',
131    value: function isScrollable(item) {
132      var offset = this.opt.offset;
133      var element = item.element;
134      var offsetWidth = element.offsetWidth;
135
136      return offsetWidth + offset < element.scrollWidth;
137    }
138  }, {
139    key: 'checkScrollableDir',
140    value: function checkScrollableDir(item) {
141      var _opt = this.opt,
142          scrollHintBorderWidth = _opt.scrollHintBorderWidth,
143          scrollableRightClass = _opt.scrollableRightClass,
144          scrollableLeftClass = _opt.scrollableLeftClass;
145      var element = item.element;
146
147      var child = element.children[0];
148      var width = child.scrollWidth;
149      var parentWidth = element.offsetWidth;
150      var scrollLeft = element.scrollLeft;
151      if (parentWidth + scrollLeft < width - scrollHintBorderWidth) {
152        (0, _util.addClass)(element, scrollableRightClass);
153      } else {
154        (0, _util.removeClass)(element, scrollableRightClass);
155      }
156      if (parentWidth < width && scrollLeft > scrollHintBorderWidth) {
157        (0, _util.addClass)(element, scrollableLeftClass);
158      } else {
159        (0, _util.removeClass)(element, scrollableLeftClass);
160      }
161    }
162  }, {
163    key: 'needSuggest',
164    value: function needSuggest(item) {
165      var scrolledIn = item.scrolledIn,
166          interacted = item.interacted;
167
168      return !interacted && scrolledIn && this.isScrollable(item);
169    }
170  }, {
171    key: 'updateItems',
172    value: function updateItems() {
173      var _this2 = this;
174
175      [].forEach.call(this.items, function (item) {
176        _this2.updateItem(item);
177      });
178    }
179  }, {
180    key: 'updateStatus',
181    value: function updateStatus(item) {
182      var _this3 = this;
183
184      var element = item.element,
185          scrolledIn = item.scrolledIn;
186
187      if (scrolledIn) {
188        return;
189      }
190      var target = element.querySelector('[data-target="scrollable-icon"] > span');
191      if ((0, _util.getOffset)(target).top < (0, _util.getScrollTop)() + window.innerHeight) {
192        item.scrolledIn = true;
193        if (this.opt.remainingTime !== -1) {
194          setTimeout(function () {
195            item.interacted = true;
196            _this3.updateItem(item);
197          }, this.opt.remainingTime);
198        }
199      }
200    }
201  }, {
202    key: 'updateItem',
203    value: function updateItem(item) {
204      var opt = this.opt;
205      var element = item.element;
206
207      var target = element.querySelector('[data-target="scrollable-icon"]');
208      this.updateStatus(item);
209      if (this.isScrollable(item)) {
210        (0, _util.addClass)(element, opt.scrollableClass);
211      } else {
212        (0, _util.removeClass)(element, opt.scrollableClass);
213      }
214      if (this.needSuggest(item)) {
215        (0, _util.addClass)(target, opt.suggestClass);
216      } else {
217        (0, _util.removeClass)(target, opt.suggestClass);
218      }
219      if (opt.suggestiveShadow) {
220        this.checkScrollableDir(item);
221      }
222    }
223  }]);
224
225  return ScrollHint;
226}();
227
228exports.default = ScrollHint;
229module.exports = exports['default'];
230
231},{"./util":3,"es6-object-assign":1}],3:[function(require,module,exports){
232'use strict';
233
234Object.defineProperty(exports, "__esModule", {
235  value: true
236});
237var append = exports.append = function append(element, string) {
238  var div = document.createElement('div');
239  div.innerHTML = string;
240  while (div.children.length > 0) {
241    element.appendChild(div.children[0]);
242  }
243};
244
245var addClass = exports.addClass = function addClass(element, className) {
246  if (element.classList) {
247    element.classList.add(className);
248  } else {
249    element.className += ' ' + className;
250  }
251};
252
253var removeClass = exports.removeClass = function removeClass(element, className) {
254  if (element.classList) {
255    element.classList.remove(className);
256  } else {
257    element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
258  }
259};
260
261var getScrollTop = exports.getScrollTop = function getScrollTop() {
262  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
263};
264
265var getScrollLeft = exports.getScrollLeft = function getScrollLeft() {
266  return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
267};
268
269var getOffset = exports.getOffset = function getOffset(el) {
270  var rect = el.getBoundingClientRect();
271  return {
272    top: rect.top + getScrollTop(),
273    left: rect.left + getScrollLeft()
274  };
275};
276
277},{}]},{},[2])(2)
278}

278);