jQuery UI;jQuery自定义滚动条数学

jQuery UI & jQuery custom scroller math

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

我正在为一个项目构建一个自定义滚动器，我正在努力弄清楚如何让滚动器处理程序到达窗口底部，并让内容也到达底部，即。在这个fiddle中，我制作了：http://jsfiddle.net/BPcfc/我使用jQuery UI draggable将窗口顶部的位置设置为与拖动的句柄的减去位置相同的位置，但当您将句柄拉到窗口底部时，仍有更多内容在视图之外。我甚至不知道该做什么计算才能算出这个！？

相关JS:

$( "#dragger" ).draggable({ 
    axis: "y", 
    containment: "parent", 
    drag: function(event, ui) {
        var top = ui.offset.top;
        $('#move').css('top', '-'+top+'px');                    
    } 
});

拖动手柄的顶部位置只是一回事。你必须在计算中再考虑3个值：

  • 滚动窗口的客户端区域的高度
  • 内容的高度
  • 拖动手柄的高度

使用这些值，计算非常简单：

(content_height - window_height) / (window_height - handle_height) * top
^Part 1                            ^Part 2                           ^Part 3

第1部分是必需的，因为在屏幕上可以看到一个充满内容的窗口。需要第2部分，因为手柄的顶部位置只能在0到window_height - handle_height)之间。在第3部分中，只需将其乘以top，就完成了。

我还为我的代码添加了一个小的单行，您可以自由删除它。它会调整你的句柄大小，让用户大致了解他们应该期待多少内容。

剩下的由你决定。您需要查看是否需要滚动条，并检查您的除法是否为零值。

jsFiddle演示

Javascript：

var window_height = $('#window').height();
var content_height = $('#move').height();
// Remove this line if you want a fixed size dragger
$('#dragger').css('height', Math.round(window_height / content_height * window_height));
var handle_height = $('#dragger').height();
$( "#dragger" ).draggable({ 
    axis: "y", 
    containment: "parent", 
    drag: function(event, ui) {
        var top = ui.offset.top;
        var newpos = Math.floor((content_height - window_height) / (window_height - handle_height) * top);
        $('#move').css('top', '-'+newpos+'px');                    
    } 
});
​

CSS:

#window {
    width: 500px;
    height: 500px;
    border: 1px solid red; 
    position: relative; 
    overflow: hidden;    
}
#dragger {
    width: 32px;
    height: 32px;
    background: green;
    position: absolute;
    right: 0;
    top: 0;
}
#move {
    width: 100px;
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    word-break: break-word;
    color: white;   
}
​

HTML:

<div id="window">
    <div id="move">Bacon swine pastrami, prosciutto corned beef cow capicola chicken. Ham hock andouille shoulder short ribs strip steak beef ribs. Short loin swine andouille beef ribs, capicola sausage chicken salami strip steak corned beef meatball shankle t-bone chuck. Beef swine biltong, brisket meatball boudin pastrami chicken salami chuck shankle meatloaf pork loin. Meatloaf shoulder pig, pancetta beef ribs kielbasa ham hock ham t-bone.Bacon swine pastrami, prosciutto corned beef cow capicola chicken. Ham hock andouille shoulder short ribs strip steak beef ribs. Short loin swine andouille beef ribs, capicola sausage chicken salami strip steak corned beef meatball shankle t-bone chuck. Beef swine biltong, brisket meatball boudin pastrami chicken salami chuck shankle meatloaf pork loin. Meatloaf shoulder pig, pancetta beef ribs kielbasa ham hock ham t-bone.</div> 
    <div id="dragger"></div>        
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

由于您已经在使用jquery，您可以使用滚动条的jquery插件，而不是重新设计轮子；-）。看看小滚动条。我正在使用它，它适用于常见的浏览器（IE8、chrome、firefox、safari和移动设备）。

相关文章：