CODEWITHSUNDEEP
javascriptcss
Harard Dype
Harard Dype

Reputation: 61

Translate3d adds extra space at the end of document

I made a smooth scroll on the page using transform translate3d. But there is a problem. Translate3d adds extra space at the end of the document. You can see it here: https://codepen.io/anon/pen/WEpLGE

I think that the problem is somewhere here:

if(Math.round(currentY) !== Math.round(destY)){
  var newY = Math.round(currentY + ((destY - currentY) * 0.1));
  container.css({
    transform: 'translate3d(0, -' + newY + 'px, 0)'
  });
}

You can see that at the end of the image container, there is an empty space. How can I solve the problem?

Upvotes: 1

Views: 341

Answers (1)

Don
Don

Reputation: 4157

Using transform does not cause the surrounding elements to reflow. Essentially this means the browser isn't rerendering the size of the containing element even though you're moving it with translate3d. The images are staying in their original spot when it comes to influencing the size of the parent container, or where text gets flowed around them but the user sees it moved by the translate.

In short, it's not adding space. That space is the space which the translated element would be taking up if it wasn't moved.

This article explains it in the third paragraph of the "Transform" section.

I'm not exactly sure what you're trying to achieve with the translate. It looks to me like it's some sort of parallax effect? I'd remove the if statement where the transform is added, and see if you're fine with that. You might try position: absolute also. I can explain why it's happening, but without more detail as to what you're trying to achieve it's going to be hard to help with a solution.

Edit:

After looking at the code, it looks like you're going for a smooth scroll effect where the images lag behind the scroll then drift into place. Kind of like scrolling on a cellphone where it drifts to its final position.

This is technically 2 questions in one, "Why is there extra space" and "how do I get this smooth scroll". I recommend you add another question, or edit this one to be more specific to one or the other. But I'll give you a hint as to how I would fix it.

My recommendation would be to change the code, not to add an incrementing offset (which is why you end up with the space at the end). But detect a scroll, add a class which shifts everything up with a css transition then when the scrolling stops remove that class so everything shifts back down.

This would leave everything in its original place on the screen when they stop scrolling instead of leaving it offset as it is now.

If you confirm this I'll give you some example code, not going to take the time on an assumption though.

Upvotes: 1

Related Questions