Question

我正在开发一个网站，以进一步了解javascript，css和html。该网站的草案在这里：http://test13111983.free.fr/

我在滚动时遇到了一些麻烦：向上或向下滚动会触发水平滚动。

当我在笔记本电脑上使用触控板上下滚动时，动画在Chrome上非常流畅，但在Firefox上却很糟糕。

在Chrome上，当我向上滚动时，页面的左侧部分会瞬间消失。

这是我用于滚动的js代码：

var scroll = 0;
var target_page = "";
var round = 0;
var speed=50;
var timeout = null;
var diff = 0;

$('.accueil').on('mousewheel DOMMouseScroll', function(e){
if(typeof e.originalEvent.detail == 'number' && e.originalEvent.detail !== 0) {
  if(e.originalEvent.detail > 0) {
    scroll++;
  } else if(e.originalEvent.detail < 0){
      scroll--;
  }
} else if (typeof e.originalEvent.wheelDelta == 'number') {
  if(e.originalEvent.wheelDelta < 0) {
      scroll++;
  } else if(e.originalEvent.wheelDelta > 0) {
      scroll--;
  }
}

if(scroll>0){
  round = Math.trunc(scroll/speed);
  target_page = '.page:eq('+(numItems-round-2)+')';
  $('.accueil').css("width", (0.32+0.2*(numItems))*$(window).innerWidth()+0.3*$(window).innerWidth()*scroll/speed);
  $('.accueil').css("left", -0.5*$(window).innerWidth()*scroll/speed);
  $(target_page).css("width", 0.2*$(window).innerWidth()*(1+1.5*(scroll/speed-round)));
  $(target_page+' .photo').css("height", -0.01*$(window).innerHeight()+0.2*$(window).innerHeight()*(1+1.5*(scroll/speed-round)));
  $(target_page+' .photo').css("width", -0.01*$(window).innerWidth()+0.2*$(window).innerWidth()*(1+1.5*(scroll/speed-round)));
  if(scroll/speed- round > 0.5){$(target_page+' .numero').css("color", "#000");}else{$(target_page+' .numero').css("color", "#eaeaea");}
  $(target_page+' .titre, '+target_page+' .date, '+target_page+' .categorie, '+target_page+' .sous_titre, '+target_page+' .numero').css("margin-left", 0.2*$(window).innerWidth()*(0.05+1.5*(scroll/speed-round)));

  clearTimeout(timeout);

    timeout = setTimeout(function() {
        if(scroll/speed- round <= 0.5){scroll=round*speed;$(target_page+' .numero').css("color", "#eaeaea");}
        else{scroll=(round+1)*speed;$(target_page+' .numero').css("color", "#000");};
        $('.accueil').css("width", (0.32+0.2*(numItems))*$(window).innerWidth()+0.3*$(window).innerWidth()*scroll/speed);
        $('.accueil').css("left", -0.5*$(window).innerWidth()*scroll/speed);
        $(target_page).css("width", 0.2*$(window).innerWidth()*(1+1.5*(scroll/speed-round)));
        $(target_page+' .photo').css("height", -0.01*$(window).innerHeight()+0.2*$(window).innerHeight()*(1+1.5*(scroll/speed-round)));
        $(target_page+' .photo').css("width", -0.01*$(window).innerWidth()+0.2*$(window).innerWidth()*(1+1.5*(scroll/speed-round)));
        $(target_page+' .titre, '+target_page+' .date, '+target_page+' .categorie, '+target_page+' .sous_titre, '+target_page+' .numero').css("margin-left", 0.2*$(window).innerWidth()*(0.025+1.5*(scroll/speed-round)));

    }, 1000);
}
  else{scroll=0;}

    });

代码在滚动时的作用是：1）设置div 2）和页面3）并将其水平移动

我想要跨浏览器的平稳高效转换。有什么建议吗？

提前谢谢您。

Answer 1

我自己找到了（痛苦的）解决方案。

1）首先，我必须更改CSS布局的完成方式。假设要移动的每个元素都是带有以下代码的代码：

position:absolute;
top:0;
left:0;

2）然后，大多数动画是使用transform：matrix属性制作的。我尽量减少其他参数动画（如边距，填充等）。最后，我只是使用transform：矩阵，为动画设置了一点宽度和不透明度。

好多了。此外，它对于Firefox也很好用。我不得不重新考虑整个布局，但这是值得的。

尝试平滑动画，并理解为什么我的文字瞬间消失

1 个答案: