-1

如何在sly.js的水平滚动部分中垂直滚动。

这是我的 JavaScript 和 HTML。使用<div>with class="test"，我也希望能够垂直滚动。sly.js 甚至可以做到这一点吗？

jQuery(function($) {
  $('#frame').sly({
    horizontal: 1,
    itemNav: 'forceCentered',
    smart: 1,
    activateMiddle: 1,
    scrollBy: 1,
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    swingSpeed: 0.2,
    scrollBar: $('.scrollbar'),
    elasticBounds: 1,
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,
    speed: 300,
    startAt: 3,
  });
});

<body>
  <div class="scrollbar">
    <div class="handle">
      <div class="mousearea">
      </div>
    </div>
  </div>
  <div id="frame">
    <ul class="slidee">
      <li>
        <div class="test"></div</li>
          <li>
            <p>Here is some text</p>
            <img src="http://dummyimage.com/20x40/ccc/fff&text=2"></img>
          </li>
          <li>
            <p>Here is some text. If we overflow.</p>
            <img src="http://dummyimage.com/100x200/ccc/fff&text=3"></img>
          </li>
          <li>
            <p>Here is some text</p>
            <img src="http://dummyimage.com/20x40/ccc/fff&text=4"></img>
          </li>
    </ul>
    </div>
  </div>
</body>

JS Bin 示例

4

1 回答 1

1

编辑

我用这个例子来重建你想要的。

jQuery(function($) {

  $('#frame').sly({
    horizontal: 1,

    itemNav: 'forceCentered',
    smart: 1,
    activateOn: 'click',

    scrollBy: 1,

    mouseDragging: 1,
    swingSpeed: 0.2,

    scrollBar: $('.scrollbar'),
    dragHandle: 1,

    speed: 600,
    startAt: 2
  });

});
#frame {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
}
ul {
  display: flex;
  flex-direction: row;
}
li {
  margin: 10px;
  width: 100px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://darsa.in/sly/js/sly.min.js"></script>
<div class="scrollbar">
  <div class="handle">
    <div class="mousearea"></div>
  </div>
</div>
<div id="frame">
  <ul class="slidee">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>
</div>

于 2015-12-24T00:19:15.510 回答