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

Question

I have code that it normally behaves but I want to implement momentum scroll. For the momentum scroll to work, I need to get the position fixed at the body tag. That is not a problem. The problem occurs in different elements with absolute positioning and flex grids.

Do you know a way that I can bypass the fixed positioning?

I am using the butter.js library for implementing momentum scroll but I tested with this codepen and it gives the same result

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;
}

Like I said it is not a problem with a code or the the way it is typed. I do not get error while handling it. But this

main.style.position = 'fixed';

is the problem. I do trying to connect to a body tag but it still same problem

Link to a codepen momentum scroll

this is an image that to show how does it mess up

Answer 1

Try changing the width of the 'main' element. They are usually coded to fit only elements not the screen