Как сделать так чтобы не отображалась полоса прокрутки когда блок уезжает/приезжает?

Question

[Никита Гуриев]

Блок "приезжает", когда нажимаешь на соответствующую кнопку, а уезжает, когда нажимаешь на любую область сзади.

HTML

<div class="container bg-dark">
    <div class="row">
        <div class="col">
            <button class="btn btn-primary my-4" id="showIB">Показать панель</button>
        </div>
        <div class="col">
            <div class="card border-success mb-3 float-right" style="max-width: 18rem;" id="sampleCard">
                <div class="card-header bg-transparent border-success">Header</div>
                <div class="card-body text-success">
                    <h5 class="card-title">Success card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <div class="card-footer bg-transparent border-success">Footer</div>
            </div>
        </div>
    </div>
</div>

CSS

#sampleCard {
    right: -130%;
    display: none;
    opacity: 0;
}

jQuery

$(document).ready(function () {
    $("#showIB").on("click", function (event) {
        event.stopPropagation();
        $("#sampleCard")
            .animate({
                right: 0,
                opacity: 1
            })
            .css("display", "inline");
    });
    $("#sampleCard").on("click", function (event) {
        event.stopPropagation();
    });
});
$(document).on("click", function () {
    $("#sampleCard").animate(
        {
            right: "-130%",
            opacity: 0
        },
        {
            complete: function () {
                $(this).css("display", "none");
            }
        }
    );
});

Answer 1

[prrrrrrr]

заменить:
<div class="container bg-dark">
на

<div class="container bg-dark" style="overflow:hidden;">

Comments

[Никита Гуриев]

Хм, тогда он просто обрезается. Попробовал добавить в body стиль, но тогда вниз не прокручивается. А там будет ещё контент.

[Dmitry Tyvaniuk]

Никита Гуриев, overflow-x: hidden

[Никита Гуриев]

Dmitry Tyvaniuk, Гениально! Спасибо.

Answer 2

[Tim]

замените js

$(document).ready(function () {
	$("#showIB").on("click", function (event) {
		event.stopPropagation();
		$("#sampleCard")
			.animate({
				right: 0,
				opacity: 1
			})
			.css("display", "inline");
		$('body').css("overflow","hidden");
	});
	$("#sampleCard").on("click", function (event) {
		event.stopPropagation();
	});
});
$(document).on("click", function () {
	$("#sampleCard").animate(
		{
			right: "-130%",
			opacity: 0
		},
		{
			complete: function () {
				$(this).css("display", "none");
			}
		}
	);
	$('body').css("overflow","auto");
});

Comments

[Никита Гуриев]

Не помогает.

[Никита Гуриев]

Сделал как-то похоже, только прописал в complete конструкцию + вместо "body" — document.body

[Tim]

Никита Гуриев, работает

[Tim]

https://codepen.io/testing__code/pen/xxZJLqj