CSS translateY正在扩展文档长度

main {
    transform:translate3d(0,100%,0);
    -moz-transform:translate3d(0,100%,0);
    -webkit-transform:translate3d(0,100%,0);
    transition: transform 800ms cubic-bezier(.17,.67,.12,.96);
    -moz-transition: -moz-transform 800ms cubic-bezier(.17,.67,.12,.96);
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.17,.67,.12,.96);
}
main.load {
    transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
}

您的选项：

1. 使用z-index和重叠内容，在翻译元素所在的位置设置内容以掩盖它。当它滚动到时，你可以从另一个元素下把它翻译出来
2. 改为从侧面平移。通过这种方式，您可以使用overflow-x:hidden，并且仍然可以垂直滚动
3. 使用display:none、transition: opacity .3s(带前缀(和opacity:0，等待元素在页面上可见(用javascript检测到(，然后更改为display:block和opacity:1
4. 绝对定位元素。这会将元素从流中删除，从而不会占用滚动空间(建议(

此外，没有理由使用translate3d，您可以只使用translateY(100%)，它不会强制硬件加速

您需要制作一个高度为100%的封装器div，以隐藏溢出。你仍然可以在这个包装器分区下面有内容。

http://jsfiddle.net/2HuLw/1/

HTML

<div id="main" class="loading">
    <div id="inner" class="loading">
        <p>intro content.</p>
    </div>

</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

JS-

window.addEventListener('load', function() {
    document.querySelector('#inner').classList.remove('loading');
})

CSS

html, body {
    height: 100%;
}
body {
    margin: 0;
}
#main {
    background: orange;
    height: 100%;
    overflow: hidden;
}
#inner {
    background: red;
    transition-duration: 600ms;
    overflow: scroll;
    height: 100%;    
}
#inner.loading {
    transform: translateY(100%);
}

$('main').ready(function(){ 
    setTimeout(function() {
        $('main').addClass('load');
        setTimeout(function() {
            $('body').css("overflow-y", "scroll");
            setTimeout(function() {
                $('body').css("overflow-y", "scroll");
            },1);
        },800);
    },500);
});