更新

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一点点，但由于我对帕格和手写笔很不熟悉，所以不能做太多。但我认为你明白了。不应该太难实现你想要的。

codepen：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);
}

范围滑块控制Scrollable Div

1 个答案:

更新