Question

我根据TweenMax easings和jQuery mousewheel事件创建了一个自定义div滚动条。滚动就像一个魅力，但我需要移动滚动条处理程序来显示滚动进度。我根据父宽度，scrollLeft和总div宽度的计算进行了一些测试，但没有找到正确的解决方案......
I tried让this example适应我的水平滚动条，但它仍然是一种奇怪的行为。
有什么想法吗？

$(window).on("mousewheel DOMMouseScroll", function (e) {
    e.preventDefault();
    var delta = e.originalEvent.wheelDelta / 120 /* Chrome */ || -e.originalEvent.detail; /* FF */
    var dur = 1.2;
    TweenLite.to($("#photos"), dur, {
        scrollLeft: $("#photos").scrollLeft() - parseInt(delta * 35),
        ease: Expo.easeOut,
        overwrite: 5
    });
});

实例：
http://jsfiddle.net/tccsq6e9/2/

Answer 1

<强> jsBin demo

^{（P.S：使用Tween onUpdate callback function在图库滚动上移动处理程序）}

<强>逻辑：

//     How much available scroll-space** have our elements:
//
//     |--$element--|<---------------avail scroll space--------------->|
//     |<------------------------total width-------------------------->|
//
//     Same logic goes for both elements:

galleryAvailScroll =  $gallery[0].scrollWidth - $gallery.outerWidth(true);
handlerAvailScroll =  $scrollbar.width() - $handler.width();

//     On $gallery scroll, how to move the $handler to the proper left position?

handlerLeft = $gallery.scrollLeft() * handlerAvailScroll / galleryAvailScroll; // left PX

这就是它。在滚动上进行数学计算，同时在窗口调整大小上使数据处理器像真正的滚动条一样：

以下是简化的CSS，HTML和JS的最终结果

＆＃13;

var $gallery   = $("#thumbs"),
    $scrollbar = $("#scrollbar"),
    $handler   = $("#scrollbar-handle"),
    galleryAvailScroll = 0,
    handlerAvailScroll = 0,
    handlerLeft = 0;

function setPos() {
  galleryAvailScroll = $gallery[0].scrollWidth - $gallery.outerWidth(true); // PX
  handlerAvailScroll = $scrollbar.width() - $handler.width(); // PX
  handlerLeft = $gallery.scrollLeft() * handlerAvailScroll / galleryAvailScroll;
  $handler.css({left: handlerLeft});
}
setPos(); // Get the sizes
$(window).on("resize", setPos); // Also on resize

// Scroll
$gallery.on("mousewheel DOMMouseScroll", function (e) {
  e.preventDefault();
  var eorg  = e.originalEvent,
      delta = eorg.wheelDelta/120 || -eorg.detail; // Ch || FF
  
  TweenLite.to( $gallery, 0.7, {
    scrollLeft : $gallery.scrollLeft() - delta * 35,
    ease : Expo.easeOut,
    overwrite : 5,
    onUpdate : setPos
  });
  
});

＆＃13;

body {
  padding: 15px 0 0;
  margin: 0;
}
#thumbs {
  position:relative;
  overflow:hidden;
  padding:0 10px;
  height: 175px;
  white-space: nowrap;
}
#thumbs > div {
  font-size:16px;
  display:inline-block;
  width: 150px; height: 150px;
  margin: 0 6px; /*6 + 4 LineWidth = 10 */
  background:#000;
}
#scrollbar {
  margin:0 70px;
  height:3px;
  position:relative;
  background:#ddd;
}
#scrollbar-handle {
  position:absolute;
  width:12%;
  left:0;
  height:3px;
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div id="thumbs">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div id="scrollbar">
  <span id="scrollbar-handle"></span>
</div>

＆＃13;

由于您的处理程序是＆＃34;已修复＆＃34;在12%宽度，如果您决定使其与宽度内容相关，则可以从How to make custom scrollbar jQuery plugin获得所需的数学

自定义水平滚动条逻辑

1 个答案: