scrolltop() 在 chrome 和 safari 中运行不顺畅，但在 Firefox 中运行答案

【问题标题】：scrolltop() is not work smoothly in chrome & safari but work in firefoxscrolltop() 在 chrome 和 safari 中运行不顺畅，但在 Firefox 中运行
【发布时间】：2012-10-20 19:28:28
【问题描述】：

如果您检查此链接http://jsfiddle.net/Hbkdt/。

$(window).scroll(function() {
       $(".fixed").css("top", $(window).scrollTop() + "px");
    });

向下移动滚动条。然后你可以看到 .fixed DIV 在 FF 中运行顺畅，但在 Safari 和 Webkit 中运行不顺畅。

我不知道我该如何解决它。任何帮助表示赞赏:)

我在 mac 中使用 Chrome 版本 22.0.1229.94。

【问题讨论】：

在 Chrome（mac 上的最新版本）中它很流畅。但是你为什么要尝试用 JS 定位那个元素呢？有一个额外的 css (position: fixed) 属性。
我知道，但我的要求不同
你为什么需要javascript？你想达到什么目的？只是在左上角保持平滑？
您考虑过这种方法吗？ jsfiddle.net/thirtydot/Hbkdt/26
这太棒了，请给出这个答案。所以，我会接受它并可以稍微解释一下。

标签： jquery css cross-browser scroll

【解决方案1】：

我建议一个替代方案。赋予平滑效果最有利的选择是动画位置变化，假装缓动。

类似的东西

$(window).scroll(function(){
    $(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000); 
});

Demo

这很好用，但是当您开始使用滚动窗格滚动时，它又开始结结巴巴了。

但是，要克服这个问题，您可以使用debouncing techniques。

$(window).scroll(function(){
    $.doTimeout( 'scroll', 250, function(){
                         // ^ This time prevents the following code to run, 
                         //   if another scrolling occurs within this time

                         //   Thus enabling us to give a smooth scroll effect
                         //   Once the user is done scroll

        $(".fixed").stop(false, true) //break the queue fast
                   .animate({ "top" : $(window).scrollTop()}, 200);
    });
});

Demo

【讨论】：

我不想在上面放任何动画。
@sandeep，但它是实现您正在尝试的目标的好选择。

【解决方案2】：

在您的情况下，要将您的 div 固定在页面的固定位置，您需要使用 CSS 位置 fixed 而不是 absolute

你的滚动事件可以被移除，你的 CSS 应该是这样的：

.fixed {
    padding:20px;
    border:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
}

这是更新后的小提琴：http://jsfiddle.net/Hbkdt/17/

【讨论】：

请参阅我上面对 zomboble 的评论，为什么我更喜欢 js 而不是 CSS position:fixed。检查这个 jsfiddle.net/Hbkdt/11
OP 已经尝试过这个here。也阅读 cmets
该死的 :o) 所以这不是最终答案，但一个线索是通过定义变量来避免完整的 JQuery 元素“定义”每个滚动事件：jsfiddle.net/Hbkdt/18

【解决方案3】：

在固定的 div 中添加一个相对 div 并在调整大小时调整其宽度。

<div class="fixed">
    <div class="container">
         <ul>
            <li>Resize frame</li>
            <li>Test1</li>
            <li>Test1</li>
            <li>Test1</li>
        </ul>
        <div class="victim">Why i am not visible</div>
    </div>
</div>

js:

jQuery(document).ready(function($) {
    var fitWidth = function() {
        $(".fixed .container").width(Math.min(
            $(window).width(), $(".fixed").width()
        ));
    };

    $(window).resize(fitWidth);
    fitWidth();
});

css:

.fixed {
    border:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
    width:1000px;
    background:red;
}

.container {
    background: #ff0;
    position: relative;
}

...

jsfiddle example

【讨论】：

【解决方案4】：

您只使用position: absolute 并在元素上设置scrollTop，因为当使用position: fixed 时，如果窗口宽度小于元素的宽度，则元素的一部分将被隐藏，甚至如果您向右滚动以尝试查看它：

http://jsfiddle.net/Hbkdt/11/

解决此问题的另一种方法是坚持使用position: fixed，然后解决部分元素被隐藏的问题：

http://jsfiddle.net/thirtydot/Hbkdt/26/

元素的left 属性在滚动设置上，使其看起来像水平滚动一样工作：

$(window).scroll(function() {
    $(".fixed").css("left", -$(window).scrollLeft() + "px"); 
});

由于现在再次使用position: fixed，垂直滚动非常流畅。

【讨论】：