自定义滚动条逻辑

Custom scrollbar logic

本文关键字：滚动条 自定义      更新时间：2023-09-26

我基于 TweenMax 缓动和 jQuery 鼠标滚轮事件制作了一个自定义的div 滚动器。滚动就像一个超级按钮，但我需要移动滚动条处理程序来显示滚动进度。我根据父宽度、scrollLeft 和总div 宽度的计算进行了一些测试，但没有找到正确的解决方案......
我试图将此示例改编为我的水平滚动条，但这仍然是一种奇怪的行为。
知道吗？

$(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/

滚动条数学逻辑

Scrollbars logic:
(onInit, onResize) thumbSize = viewportSize * viewportSize / areaSize
(onThumbDrag)      viewportScrollPos = areaSize / viewportSize * thumbPos
(onViewportScroll) thumbPos = viewportScrollPos / viewportSize * thumbSize

就是这样。在滚动和窗口大小调整上获取数学运算，以使处理程序像真正的滚动条一样工作：

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

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

由于您的处理程序12%宽度"固定"，如果您决定使其与宽度内容相关，则可以从如何创建自定义滚动条jQuery插件中获取所需的数学运算

相关文章：