Question

在网站klangmanufaktur.de我们有一个水平滚动设计（在桌面屏幕上）。但是，在某些子页面上有大的背景图像，滚动根本不平滑（单击水平箭头时）： www.klangmanufaktur.de/impressionen/ 对于Safari来说尤其如此。

使用标签加载图像，但使用jQuery使用DOM操作将其更改为大型背景图像。有问题： 1.没有平滑的滚动 2.背景图像仅在滚动到视口时加载，因此在短时间内，黑色背景可见

以下是箭头点击水平滚动的代码：

   // horizontal scrolling on arrow click
$('.horizontal-arrow.right').click(function(){
    if($(window).innerWidth()>767) {
        var scrolled = false;
        $('.pagebox-inner').each(function(){
            if($(this).offset().left>window.pageXOffset + $(window).width() - $('header.site-header').outerWidth() && scrolled==false) {
                $('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
                });
                scrolled=true;
            }
        });
    }
});

$('.horizontal-arrow.left').click(function(){
    if($(window).innerWidth()>767) {
        var scrolled = false;
        $($('.pagebox-inner').get().reverse()).each(function(){
            if($(this).offset().left<window.pageXOffset + $('header.site-header').outerWidth() && scrolled==false) {
                $('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
                });
                scrolled=true;
            }
        });
    }
});

以下是单击子菜单链接时滚动的代码，如下所示： www.klangmanufaktur.de/restaurierung

      // horizontal scrolling of anchor links
   $('nav.main-navigation li a').each(function(){
        if($(this).attr('href')!=$(this).attr('href').replace('#','')) {
            $(this).click(function(){
                currentMainHash = window.location.hash;
                var linkUrlSplit = $(this).attr('href').split("#");
                var currElem = $('#post-'+linkUrlSplit[linkUrlSplit.length-1]);
                if(currElem) {
                    if($(window).innerWidth()>767) $('body,html').animate({ scrollLeft: currElem.offset().left - $('header.site-header').outerWidth() }, 2000,'swing',function(){ scrolled = false; });
                    else  $('body,html').animate({ scrollTop: currElem.offset().top }, 2000,'swing',function(){
                        scrolled = false;
                        $(this).blur();
                    });
                }
                $('.currentLink').removeClass('currentLink');
                $(this).addClass('currentLink');
            });
        }
   });

有关如何解决“不平滑滚动”问题的建议吗？是否可以将图像显示为元素而不是背景图像？

感谢您的帮助！

亲切的问候 joschi81

平滑水平滚动大背景图像

0 个答案: