0

ページの右側に過剰な水平スクロールがあるようです。

サイトの上部にあるスクリプトに関係していると推測しました。スクリプトを削除すると、問題は自然に解決します。

私が達成したいことのアイデアを提供するだけです。上部の画像をブラウザの幅 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>
4

1 に答える 1

0

<div class="social" style="background-image: …;">スクロールバーの原因です。

幅 2160 ピクセル (余白を含む) の要素を効果的に作成しているのに、なぜ水平スクロールバーがあるのか​​疑問に思っていますか?

あなたが持っている：

.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 構造を並べ替えるか、要素にposition: relative;orposition: absolute;を割り当てることで「通常の」フローから要素を取り出すことができます。

于 2012-08-01T09:59:45.237 に答える