Ich kann diese Scrollleiste nicht loswerden.

Question

Ich habe eine Website mit einem Formular, das von rechts herausschiebt, wenn Sie auf eine blaue Schaltfläche klicken:

Wie Sie wahrscheinlich sehen können, erlaubt die horizontale Scrollleiste den Besuchern, das herausschiebende Formular vor und nach seiner Aktivierung zu sehen. Das ist das Problem, ich hoffe, jemand kann mir dabei helfen, es zu lösen.

Dies ist der jQuery-Code, den ich verwende:

            $(document).ready(function()
            {
                function positioningForm()
                {
                    $('#insider').css({"right": "-535px"}).show();
                }
                function slideFromRight()
                {
                    $('#insider').animate(
                    {right: "0px"},
                    {duration: '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;
                    }
                });
            });

Answer 1

Fügen Sie dies zu css hinzu:

body{overflow-x:hidden;}

wenn Sie keinen organisierten css-block haben, fügen Sie einfach style="overflow-x:hidden" zu Ihrem body-tag hinzu, wie folgt:

gelöst. ;)

Answer 2

Der Bildlauf erscheint, weil Sie das Element nicht verbergen, sondern nach rechts bewegen. Es geht alles um CSS. Mögliche Lösungen sind overflow-x:hidden MDN MSDN oder das Hinzufügen eines Containers mit display:none MDN MSDN für den Teil außerhalb des Buttons.