Javascript 如何使经典jQuery视差更平滑

我有一个经典的jQuery视差设置，如下所示

$(window).scroll(function () {
  parallax();
});

var offset;

$(document).ready(function(){
  var p = $( ".content" );
  var offset = p.offset();
  var offset = offset.top;
});

function parallax() {
  render($(document).scrollTop());
}

function render(ev) {
  var t = ev;
  var y = Math.round(t * .25);
  $('.content').css('bottom', - y - 100 + 'px');
}

---

有没有办法让它变得更平滑

您可能希望尝试在

.content

元素上添加

转换

.content{
  transition: bottom 0.3s linear;
}

您需要以在转换中指定的相同间隔启动视差函数

尝试以下方法以相同的间隔启动视差功能：

var interval;
var timeout;

$(window).scroll(function(event){
  //prevent from stopping the interval
  clearTimeout(timeout);

  //execute parallax every 300ms => same as transition
  if(!interval){
    parallax();
    interval = setInterval(function(){
      parallax();
    }, 300);
  }

  //stops the interval after you stopped scrolling for x amount of time
  timeout = setTimeout(function(){
    clearInterval(interval);
    interval = null;
  }, 300);
});

您是否尝试过类似于平滑滚动条的插件？您可以在浏览器可用的位置查看如何实现
滚动行为
，并将上述内容用作尚未支持它的浏览器的后备。使用css属性
转换
，还需要一些冷冻柜，例如，将在300ms时启动一次滚动处理程序谢谢您的建议。你能详细说明一下你将如何启动你所说的渲染器功能吗？非常感谢。谢谢你，扎米，这是一个非常好的解决方案，它确实有效：）