视差背景超出容器致页面右侧留白的修复方案咨询

Great question! The white space on the right is happening because your scaled background (scale(1.1)) is overflowing its container, and the browser is rendering that extra content instead of clipping it. Here's how to fix it while keeping the parallax effect intact:

Root Cause #

When you apply scale(1.1) to #home-background, the element's actual size becomes 110% of its original dimensions. Since the parent container (#home) doesn't restrict overflow, the browser shows the extended edges of the background, creating that unwanted white space or horizontal scrollbar.

Step-by-Step Fix #

1. Add Overflow Clipping to the Parent Container #

First, update your CSS to give the #home section proper sizing and overflow control:

/* Add this for the parent container */
#home {
  position: relative; /* Makes the absolute-positioned background reference this container */
  width: 100vw;       /* Full viewport width */
  height: 100vh;      /* Full viewport height */
  overflow: hidden;   /* Critical: clips any content that overflows the container */
  margin: 0;          /* Remove default body margins if needed */
}

#home-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://www.tokkoro.com/picsup/5746854-geometry-wallpapers.jpg") no-repeat center center;
  background-size: cover;
  z-index: -1;
}

#menu {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #251524;
  height: auto;
}

/* Optional: Reset default body/html margins to avoid unexpected spacing */
html, body {
  margin: 0;
  padding: 0;
}

2. Fix Minor JS Typo (For Better Cross-Browser Support) #

Your original code has a typo in the webkit transform property — fix it to ensure the effect works in Chrome/Safari:

var lFollowX = 0, lFollowY = 0, x = 0, y = 0, friction = 1 / 60;
function moveBackground() {
  x += (lFollowX - x) * friction;
  y += (lFollowY - y) * friction;
  const translate = `translate(${x}px, ${y}px) scale(1.1)`;
  $('#home-background').css({
    '-webkit-transform': translate, // Fixed "webit" to "webkit"
    '-moz-transform': translate,
    'transform': translate
  });
  window.requestAnimationFrame(moveBackground);
}
$(window).on('mousemove click', function(e) {
  var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
  lFollowX = (20 * lMouseX) / 100;
  lFollowY = (10 * lMouseY) / 100;
});
moveBackground();

Why This Works #

• position: relative on #home ensures the background's absolute positioning is tied to the section, not the entire body.
• 100vw/100vh makes the section fill the entire viewport, so the background doesn't extend beyond what the user sees.
• overflow: hidden clips the scaled background's edges, preventing overflow while keeping the parallax movement intact.

Alternative for Older Browser Compatibility #

If you need to avoid vw/vh, you can use percentage-based sizing instead:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#home {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

This achieves the same result by making the body and home section fill the full viewport height.

内容的提问来源于stack exchange，提问作者nosferatume