Question

我的页面右侧似乎有一些过度的水平滚动。

我已经扣除了这与我在网站顶部的脚本有关 - 当我删除它时，问题会自行解决。

只是为了让你了解我希望实现的目标;我希望顶部的图像跨越浏览器的100％宽度，但保持类型居中。

当您第一次访问该网站时，您将对我正在谈论的内容有所了解。

http://cargocollective.com/btatest

提前致谢

迈克尔

修改

代码如下：

<script type="text/javascript">
        // The social div 
    var $socialDiv,
        // The social div's height 
        socialDivHeight = 560,
        currentSocialDivHeight = socialDivHeight;


    $(document).ready(function() {
        $socialDiv = $('.social');
        $socialDiv.css({
            'background-image': 'url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg)',
            'background-repeat': 'no-repeat',
            'background-attachment': 'fixed',
           'background-size' : '110% auto',
            'height' : socialDivHeight + 'px',
            'margin-left' : '-100%',
            'margin-right' : '-100%',


        });
    });


    $(window).scroll(function() { 
        //Get scroll position of window 
        var windowScroll = $(this).scrollTop(); 

        var newSocialDivHeight = Math.max(0, socialDivHeight - windowScroll);

        if (Math.abs(newSocialDivHeight - currentSocialDivHeight) < 1)
            return;

        $socialDiv.css({
            'opacity' : 1 - windowScroll / 400
        });

        currentSocialDivHeight = newSocialDivHeight;
    });
</script>

Answer 1

<div class="social" style="background-image: …;">导致滚动条。

你实际上是在创建一个2160px宽的元素（包括边距），并想知道为什么你有一个水平滚动条？

你有：

.project_content { width: 720px; }
.social {
    /* implied with = 100%, since this is a block element */
    margin-left: -100%; /* add 720px on the left */
    margin-right: -100%; /* add 720px on the right */
}

但您的目标是让.social的宽度为100％。为了实现这一点，您可以重新排序HTML结构或将元素从＆＃34; normal＆＃34;中取出。通过为其分配position: relative;或position: absolute;来实现流程。

全宽问题第2部分

1 个答案: