范圍滑塊控件 Scrollable Div

Question

我有以下問題：我想使用 HTML 范圍滑塊來控制在下方水平滾動的 div 的位置。 （基本上是滾動條功能，但一旦進入網站，它就會遠離可滾動內容。）要查看視覺效果，請參閱我的 CodePe： http ://codepen.io/Auzy/pen/qrXYYK?editors=1111（我使用Pug 和 Stylus，要查看正常的 HTML，請單擊右側的下拉箭頭並選擇“查看編譯的 HTML”）到目前為止我的代碼不起作用，但它提供了我正在嘗試執行的操作的基本概念：

JS：

(function() {
  window.RangeScroll = (function() {
    RangeScroll.init = function() {
      return $('.range-scroll').each(function(idx, el) {
        return new RangeScroll($(el));
      });
    };

    function RangeScroll($el) {
      this.limit = 0;
      this.length = 0;
      this.scroll = $el;
      this.output = $el.find('.scroll-output');
      this.range = $el.find('.scroll-range');
      this.panel = $el.find('.scroll-panel');
      this.content = $el.find('.scroll-content');
      this._calc_range();
      this._add_events();
    }

    RangeScroll.prototype._calc_range = function() {
      this.limit = this.panel.outerWidth();
      return this.length = this.content.outerWidth();
    };

    RangeScroll.prototype._add_events = function() {
      return this.range.on('input', (function(_this) {
        return function(ev) {
          var $el, val;
          ev.preventDefault();
          $el = $(ev.currentTarget);
          val = $el.val();
          return _this.change_range(val);
        };
      })(this));
        };

    RangeScroll.prototype.change_range = function(val) {
      var ratio;
      ratio = -((val * .01) * (this.length - this.limit));
      this.output.val(val);
      return this.content.css({
        'transform': "translateY(" + ratio + "px)",
        '-webkit-transform': "translateY(" + ratio + "px)",
        '-moz-transform': "translateY(" + ratio + "px)",
        '-ms-transform': "translateY(" + ratio + "px)"
      });
    };

    return RangeScroll;

  })();

  $(function() {
    if ($('.range-scroll').length) {
      return RangeScroll.init();
    }
  });

}).call(this);

HTML：

<form class="rangeSlider">
  <input class="scroll-range" id="scroll-range" type="range"/>
</form><br/>
<div class="range-scroll">
  <div class="bems-scroller scroll-panel">
    <div class="scroll-content" id="scrolling-container">
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
    </div>
  </div>
</div>

Answer 1

從字面上看，您只需要像 javascript 一樣的東西：（在您上線時刪除 console.log）

var scroll = document.getElementById("scroll-range");

scroll.oninput = function () {
    console.log(this.value);
    var panel = document.getElementById("scrolling-container");
    panel.scrollLeft = this.value;
}

目前它只是稍微移動了 div，但由於我對 pug 和手寫筆非常不熟悉，所以不能做太多。 但我想你明白了。 不應該太難實現你想要的。

代碼筆： http ://codepen.io/anon/pen/evEKRK?editors=1111

更新

這個適用於您想要的：

var scroll = document.getElementById("scroll-range");

scroll.oninput = function () {
    var panel = document.getElementById("scrolling-container");

    var total = panel.scrollWidth - panel.offsetWidth;
    var percentage = total*(this.value/100);

    console.log(total);
    panel.scrollLeft = percentage;
    //console.log(percentage);
}