Sly.js在水平部分进行垂直滚动

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

这是我的JavaScript和HTML。有了<div>和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 示例

编辑

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

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>

相关内容

最新更新

热门标签：