I can't get rid of this scrollbar_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-11 00:19 出处：网络

I have website with a form sliding from the right when you click on a blue button: As you can probably see, the horizontal scrollbar allows visitors to see the sliding form before and after it become

相关专题：css jquery

I have website with a form sliding from the right when you click on a blue button:

As you can probably see, the horizontal scrollbar allows visitors to see the sliding form before and after it becomes active. That's the problem, I hope someone can help me solve it.

This is the jQuery code I'm using:

<script type="text/javascript">
            $(document).ready(function()
            {
                function positioningForm()
                {
                    $('#insider').css({"right": "-535px"}).show();
                }
                function slideFromRight()
                {
                    $('#insider').animate(
                    {right: "0px"},
                    {dur开发者_StackOverflow中文版ation: 'slow',easing: 'easeOutElastic'});
                }
                function slideToBeginning() {
                    $('#insider').animate(
                    {right: "-535px"},
                    {duration: 'slow',easing: 'easeOutElastic'});
                }

                // Positioning the insider at the time of page loading
                positioningForm();

                var state = 0;
                $('.right_btn').click(function() {
                    if(state == 0) {
                        //do the magic :)
                        slideFromRight();
                        state = 1;
                    } else if( state == 1) {
                        //unroll the magic :)
                        slideToBeginning();
                        state=0;
                    }
                });
            });
        </script>

add this to css:

body{overflow-x:hidden;}

if you don't have an organized block of css, just add style="overflow-x:hidden" to your body tag like so:

<body style="overflow-x:hidden;">

solved. ;)

The scroll appears because you are not hiding, but moving the element to the right. It is all about css. Possible solutions are overflow-x:hidden^MDN ^MSDN or adding adding a container with display:none^MDN ^MSDN to the non-button part.