不同类型的位置固定但结果相同

Question

我有代码，它通常的行为，但我想实现动量滚动。要使动量卷轴起作用，我需要将位置固定在主体标签上。这不是问题。这个问题发生在具有绝对定位和柔性网格的不同元素中。

你知道我能绕过固定定位的方法吗？

我正在使用butter.js库来实现动量滚动，但是我用这个代码进行了测试，结果是相同的。

const body = document.body;
const main = document.getElementById('main');

let sx = 0, // For scroll positions
    sy = 0;
let dx = sx, // For container positions
    dy = sy;


body.style.height = main.clientHeight + 'px';


main.style.position = 'fixed';
main.style.top = 0;
main.style.left = 0;

// Bind a scroll function
window.addEventListener('scroll', easeScroll);


function easeScroll() {
  
  sx = window.pageXOffset;
  sy = window.pageYOffset;
}


window.requestAnimationFrame(render);

function render(){
  //We calculate our container position by linear interpolation method
  dx = li(dx,sx,0.07);
  dy = li(dy,sy,0.07);
  
  dx = Math.floor(dx * 100) / 100;
  dy = Math.floor(dy * 100) / 100;
  
  
  main.style.transform = `translate3d(-${dx}px, -${dy}px, 0px)`;
 
  
  
  window.requestAnimationFrame(render);
}

function li(a, b, n) {
  return (1 - n) * a + n * b;
}

就像我说的，这不是代码的问题，也不是输入代码的方式的问题。我在处理它时不会出错。但这是

main.style.position = 'fixed';

是问题所在。我确实试图连接到一个身体标签，但问题仍然是一样的。

链接到代码依赖的动量卷轴

这是一张图片，用来显示它是如何搞砸的。

Answer 1

尝试更改“main”元素的宽度。它们通常被编码成只适合元素，而不是屏幕。