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

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



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");
            }
        }
    );
});
  • Вопрос задан
  • 101 просмотр
Решения вопроса 3
prrrrrrr
@prrrrrrr
Верстаю сразу на PHP.
заменить:
<div class="container bg-dark">
на
<div class="container bg-dark" style="overflow:hidden;">
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
Front-End Developer & Fullstack Designer
При клике на кнопку Показать панель => добавляете отдельный активный класс для тега </body> со свойством overflow: hidden => при повторном клике активный класс удаляете и всё.

.no-scroll {
	overflow: hidden;
}


$(document).ready(function () {
	$("#showIB").on("click", function (event) {
		$("body").addClass("no-scroll");
		// the rest of the code
	});
});

$(document).on("click", function () {
	$("body").removeClass("no-scroll");
	// the rest of the code
});


Или тоже самое без добавления/удаления класса:

$(document).ready(function () {
	$("#showIB").on("click", function (event) {
		$('body').css("overflow", "hidden");
		// the rest of the code
	});
});

$(document).on("click", function () {
	$('body').css("overflow", "auto");
	// the rest of the code
});
Ответ написан
Tim-A-2020
@Tim-A-2020
замените 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");
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы