范围滑块控件 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);
}