Question

Yes, I know there are countless posts about sliding images right to left (and LTR), but I haven’t seen one yet to solve my specific problem.

I’ve got several divs that I’m using as my backgrounds. In order to get them to slide right to left, I am setting the “left” in css to the width of the image and then animating that image in to a “left” of 0 (and the previous hero image from css left of 0 to -image width). The problem is that the scroll bar on the browser is showing up and disappearing whenever the animation takes place. Is there any way to not have the scrollbar show during the animation.

I realize the scrollbar is showing because I am setting the css “left” off to the right of the screen but don’t know any other way to allow sliding in from the right

<div id="hero_bg">
   <div class="hero"><img src="/img/one.jpg" /></div>
   <div class="hero"><img src="/img/two.jpg" /></div>
   <div class="hero"><img src="/img/three.jpg" /></div>
</div>

and the CSS is:

.hero
{
    position: absolute;
    display: none;
    width: 1245px;
    height: 619px;
    left: 0px;
    top: 0px;
    z-index: -1000;
}

and finally the JS:

$(document).ready(function () {
    $('.hero').hide();

    var delay = 2000;
    var divIdx = -1;
    var arrDiv = $("div.hero").toArray();

    function bgSlide() {
        if (divIdx < 0) {
            divIdx = 0;
            $(arrDiv[divIdx]).show();
        } else {
            var $out = $(arrDiv[divIdx]);
            divIdx = (divIdx + 1) % arrDiv.length;
            var $in = $(arrDiv[divIdx]);
            $in.css('left', $in.outerWidth());
            $in.show();
            $out.animate({ left: -$out.outerWidth() });
            $in.animate({ left: 0 });
        }
    }

    setInterval(bgSlide, delay);
});

Answer 1

CSS:

body{ overflow:hidden}

or (CSS 3)

body{ overflow-y:hidden;}

or (CSS 3)

body{ overflow-x:hidden;}

or use jquery to set the above css during animating time

$('body').css("overflow","hidden"}

*my syntax might be wrong as I am writing this from my head