6

的背景：

我正在尝试创建一个系统，该系统允许使用鼠标向上滚动和鼠标向下滚动来滚动一种地图，如下所示：

 -------
|       |
|   1   |
|       |
 -------
 -------    -------   -------   -------
|       |  |       | |       | |       |
|   2   |  |   3   | |   4   | |   5   |
|       |  |       | |       | |       |
 -------    -------   -------   -------
                                -------
                               |       |
                               |   6   |
                               |       |
                                -------

上面的每个框都在 javascript 中重置为浏览器的高度和宽度。当您上下滚动鼠标时，浏览器将滚动到地图中的相同位置，从 div 1 开始，然后是 2，依此类推。这个定位是通过我的滚动功能设置的，它监听鼠标滚动并在顶部添加适当的填充，在左侧添加边距，以创建上面地图的错觉。

这是它的codepen：

http://codepen.io/lorenzoi/pen/mxejJ

这是它的javascript：

$(function(){

    $(window).on('resize', function(){
        var $divs = $('.vertical, .horizontal > div'),
        ww =  $(this).width(),
        wh =  $(this).height();

        $divs.css({
            height : wh,
            width : ww
        });

        $('.horizontal').each(function(){
            var $container = $(this),
            nbChildren = $container.children().length;
            posY = $container.offset().top,


            $container.css({
                height: ww*(nbChildren-1) + wh,
                width: ww*(nbChildren)
            });
        });
    }).trigger('resize');

    $(window).on('scroll', function(){
        var wh = $(window).height(),
        scroolTop = $(window).scrollTop();

        $('.horizontal').each(function(){
            var $container = $(this),
            posY = $container.offset().top,
            height = $container.height(),
            nbChildren = $container.children().length,
            marginMax = $container.width()/nbChildren*(nbChildren-1),
            marginL = scroolTop - posY;

            if(marginL<0) marginL = 0;
            else if (marginL>marginMax) marginL = marginMax;
            $container.css('marginLeft', -marginL);
            $container.css('paddingTop', marginL);
        });
    }).trigger('scroll');

});

问题：

调整窗口大小会创建一个奇怪的 div 偏移量，当为 div 2 到 5 调用滚动函数时，它会自行修复。在这些 div 中调整大小时，它们似乎会自行偏移，然后只有在调用滚动函数时才会修复。

.trigger('调整大小'); 应该总是被调用，是吗？我不知道为什么只有在创建滚动功能时才会调用它。

如何补救？

4

3 回答 3

3

使用计时器就足够了：

$(function(){
    var timeoutResize;

    $(window).on('resize', function(){
        clearTimeout(timeoutResize);
           timeoutResize = setTimeout(function(){
           var $divs = $('.vertical, .horizontal > div'),
           ww =  $(this).width(),
           wh =  $(this).height();

           $divs.css({
               height : wh,
               width : ww
           });

           $('.horizontal').each(function(){
               var $container = $(this),
               nbChildren = $container.children().length;
               posY = $container.offset().top,


               $container.css({
                   height: ww*(nbChildren-1) + wh,
                   width: ww*(nbChildren)
               });
           });
       },100);
    }).trigger('resize');

    ...

});
于 2013-04-23T12:04:04.573 回答
2

. . 您需要考虑，每当用户垂直调整窗口大小时，滚动位置都会受到影响，并且它也会影响您的背景滚动（因为它基于当前滚动位置）。

. . 最简单的修复方法是$(window).trigger('scroll');在调整大小处理程序代码的末尾简单地调用，所以你让它保持干燥。我在我的 CodePen fork上做了这个改变。一探究竟。

于 2013-04-29T00:45:07.693 回答
0

如果您有一个运行过于频繁的事件处理程序，您可以像这样限制它：

function throttle(ms, fn) {
    var allow = true;
    function enable() {
        allow = true;
    }
    return function(e) {
        if (allow) {
            allow = false;
            setTimeout(enable, ms);
            fn.call(this, e);
        }
    }
}

然后将您的处理程序传递给throttle您分配它的时间。n根据您提供的第一个参数，它将返回一个最多每毫秒运行一次的函数。

$(window).resize(throttle(100, function(e) {
    // do heavy work
}));
于 2013-04-19T19:32:18.187 回答