Question

我希望div在滚动时从左向右移动。我做了什么。

但是，如何让div更快地向右移动？因为div从左到右的速度与滚动条从上到下的速度相同。对不起，如果我对你没有任何意义。

这里是JSFiddle - https://jsfiddle.net/wx8d0a1x/

$(document).ready(function () {
var $horizontal = $('#horizontal');

$(window).scroll(function () {
    var s = $(this).scrollTop(),
        d = $(document).height(),
        c = $(this).height();

    scrollPercent = (s / (d - c));

    var position = (scrollPercent * ($(document).width() - $horizontal.width()));

    $horizontal.css({
        'left': position
    });
});
});

Answer 1

您可以通过添加乘法因子或添加因子来增加scrollPercent。例如：

$(document).ready(function () {
    var $horizontal = $('#horizontal');

    $(window).scroll(function () {
        var s = $(this).scrollTop(),
        d = $(document).height(),
        c = $(this).height();
        k = 10;
        scrollPercent = k * (s / (d - c));

        var position = (scrollPercent * ($(document).width() -   $horizontal.width()));

       $horizontal.css({
        'left': position
       });
    });
});

Answer 2

现在你的速度取决于文件的长度。如果您希望它在文档的中间点到达右侧，请将您的滚动值乘以2.如果您希望它向右移动四分之一，请使用乘数4 ..等等。

使用Math.min（）确保该框不会向页面滚动。

$(document).ready(function () {
    var $horizontal = $('#horizontal');

    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            c = $(this).height(),
            m = 2; //Speed multiplier

        scrollPercent = Math.min((s / (d - c)*m),1);

        var position = (scrollPercent * ($(document).width() - $horizontal.width()));

        $horizontal.css({
            'left': position
        });
    });
});

Answer 3

只需将乘数添加到

var position = ((scrollPercent * ($(document).width() - $horizontal.width()))*1);

请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/wx8d0a1x/1/

div如何使div从左向右移动更快？

3 个答案: