带有转换比例错误的自定义JavaScript滚动条(jScrollPane）

Custom JavaScript Scrollbars (jScrollPane) with Transform Scale error

本文关键字：滚动条 JavaScript jScrollPane 自定义 转换 错误      更新时间：2023-09-26

我希望有人能知道一种方法（或方向）来纠正jScrollPane在缩放转换时对渲染缺乏支持的问题。

对于使用较大scaleFactors缩放的容器，滚动条通常会卡在底部。滚动条也倾向于在远离鼠标拖动的情况下加速，以表明计算失误。

我还在库"mCustomScrollbar"中尝试了这种方法，并得到了相同的结果。这可能是jQuery的问题吗。我知道jQueryUI（主要是拖动）在转换缩放方面也有问题。

以下是一个示例：http://jsfiddle.net/u8u3g/3/

#scene-1 {
    width: 800px;
    height: 500px;
    transform-origin: 0 0;
    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Safari and Chrome */
    transform: scale(0.8);
    -ms-transform: scale(0.8); /* IE 9 */
    -webkit-transform: scale(0.8); /* Safari and Chrome */
}
<div id="scene-1">
    <div class="container">
        <div class="inner">
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
            <p>lorem ipsume</p><br />
        </div>
    </div>
</div>
$(function() {
    $('.inner').jScrollPane();
});

我认为jScrollPane由于某种原因无法在缩放后重新计算容器的内部高度。

如有任何支持，我们将不胜感激。

我也遇到了同样的问题。问题是，当应用"Scale"函数时，$.width()总是返回原始值，但$.position()会根据比例返回。

问题本身，我决定完成插件。现在他能够确定电流"缩放"并将其除以所有值​​使用CCD_ 3获得。这就解决了问题。这里有一个插件错误修复的链接：jquery.jscrollpane.js（由-@swake_345修复）.zip.

对于应用插件的元素，不要忘记添加position:relative。

相关文章：