创建一个位于内容区域之外但不会导致浏览器窗口收缩时水平滚动条出现的分区

假设你有一个网站,网站主体的背景色是红色,内容区域的白色背景是1000像素宽。现在假设您希望在内容区域和红色背景交界处最暗的内容区域上放置一个阴影,当它在左侧离开左侧,在右侧离开右侧时,不透明性会降低。基本上是这样的:

所以我的策略是把主体的背景色变成红色,在photoshop中只抓取大约47px宽和1px高的阴影。我的问题是:

如何将其插入到我的网站上,这样浏览器的水平滚动条只在达到1000像素时显示,而不是在达到1000+47+47(内容区域的宽度加上两个阴影的宽度)时显示。

我相信这是一个常见的问题,但我真的很讨厌用这些词来表达。

谢谢!

编辑 :抱歉,缺少代码。这通常不是我的风格。现在我们开始:

HTML :

<div id="mainwrapper">
    <div id="left_shadow"></div>
    <div id="right_shadow"></div>
</div>

CSS :

#mainwrapper {
    width:1000px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#e8e8e8;
    position:relative;
}
#left_shadow {
    position:absolute;
    top:0;
    bottom:0;
    left:-47px;
    width:47px;
    background:url(/images/leftshadow.png) repeat-y;
}
#right_shadow {
    position:absolute;
    top:0;
    bottom:0;
    right:-47px;
    width:47px;
    background:url(/images/rightshadow.png) repeat-y;
}

使用这个设置,如果我将浏览器窗口缩小到1095像素,它就没有水平滚动条。如果我把它缩小到1094px,它有一个水平滚动条,因为它可以识别那些绝对定位的阴影作为内容区域的一部分。我的问题是:如何使滚动条只在到达灰色中心(1000像素)时显示?再次感谢,伙计们。