Страница прокручивается до самой верхней части при открытии модального окна или окна, которое назначает «overflow: hidden» для тела - PullRequest
Новая
       23

Страница прокручивается до самой верхней части при открытии модального окна или окна, которое назначает «overflow: hidden» для тела

1 голос
/ 15 апреля 2020

Я прочитал более 10 тем / вопросов здесь, но ни один из них не работает. Недавно я понял, как показать модал, который скрывает и / или отключает прокрутку. Затем я выяснил, как предотвратить кратковременное смещение моей страницы на одну секунду вправо из-за удаления полосы прокрутки (некрасивый эффект). Я закончил с тем, что полоса прокрутки все еще показывалась, но отключил прокрутку, похожую на Facebook, когда вы открываете там модал.

Но я столкнулся с проблемой, когда он прокручивается до самой верхней части страницы автоматически. Я пытался решить многие проблемы, но безрезультатно.

  1. Конечно, я отключил событие щелчка по умолчанию с помощью e.preventDefault ()
  2. Я назначил переполнение: скрыто для тела при открытии модального. Я также сделал это с помощью overflow-y: скрытого для тела.
  3. Некоторые говорят, что когда body установлено на 100%, вы устанавливаете его в автоматический режим при открытии модального окна. Не работает Я сделал это и наоборот.

Я хотел бы повторить, что приведенные ниже коды работают. Они отключают прокрутку и не сдвигают мою страницу вправо, потому что полоса прокрутки остается, но просто отключена. Я sh избавлюсь от резкой прокрутки до самой верхней части страницы всякий раз, когда открываю модальное окно.

ОБНОВЛЕНИЕ: Я ДОБАВИЛ SNIPPET 

$(document).on("click", "a", function(e) {
e.preventDefault();
$(".parentbox").show();
$("body").addClass("no-scroll");
});
* {
padding: 0;
margin: 0;
}

html, body {
height: 100%;
}

html {
overflow-y: scroll;
}

.no-scroll {
overflow: hidden;
}

.parentbox
{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}

.box
{
position: absolute;
background-color: #FFFFFF;
padding: 28px 18px;
text-align: center;
width: 320px;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<body>

<div class="content">
<p><strong>Top section</strong></p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="parentbox">
<div class="box">
This is a modal
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#">Open Modal</a>
<br/><br/><br/>
</div>



</body>
</html>

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Спасибо за все ответы. Я исправил это, убрав высоту: 100% на html и тело. Я вернулся туда, где убирается полоса прокрутки, в результате чего вся страница переместилась на правую сторону. Чтобы исправить движение, я добавил отступ: 17px к содержимому div / body, когда открывается через Jquery.

Спасибо!

0 голосов
/ 15 апреля 2020

Вы можете просто удалить href="#", чтобы предотвратить прокрутку страницы вверх.

Редактировать: Хотя использование кнопки, вероятно, лучше.

Вы должны использовать Кнопка в этом случае. Это более уместно как с точки зрения semanti c, так и с точки зрения доступности. Якоря должны взять вас куда-то, а не выполнять действие.

Источник

...