Остановите горизонтальную прокрутку с помощью translate transform - PullRequest
Новая
       22

Остановите горизонтальную прокрутку с помощью translate transform

0 голосов
/ 23 ноября 2018

Используя Bootstrap 4, у меня есть боковая панель, которую я хочу показать / скрыть при нажатии кнопки.У меня это отлично работает на рабочем столе, оно скрывает боковую панель и область основного контента занимает остальное пространство:

HTML: 

<a class="sidebar-toggle" href="#"><i class="fa fa-bars"></i></a>

<div class="d-flex wrapper">
    <div class="sidebar sidebar-dark bg-dark">
        <ul class="list-unstyled">
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
        </ul>
    </div>

    <div class="content m-4">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

CSS: 

.sidebar {
    min-width: 220px;
    max-width: 220px;
    min-height: calc(100vh - 56px);
}
.wrapper-toggled .sidebar {
    margin-left: -220px;
}

JS: 

$(document).on('click', '.sidebar-toggle', function (event) {
    event.preventDefault();
    $('.wrapper').toggleClass('wrapper-toggled');
});

Моя проблема в том, что мне нужно немного другое поведение на мобильном телефоне.По умолчанию боковая панель должна быть скрыта и отображаться при нажатии кнопки.Когда отображается боковая панель, я хочу, чтобы она сдвигала все вправо.У меня это работает, но это вызывает горизонтальную полосу прокрутки, чтобы показать остальную часть отрезанного .content содержимого.

Вот код для этого: 

@media (max-width: 768px) {
    .sidebar {
        margin-left: -220px;
    }
    .wrapper-toggled {
        transform: translate(220px, 0);
    }
}

Iя пытался добавить overflow-x: hidden к телу и класс .wrapper, который не работал.

Кроме того, кажется, что он повредил общую высоту области просмотра на мобильном устройстве, когда отображается боковая панель.Высота страницы увеличивается, когда отображается боковая панель.

Есть ли лучший способ сделать это?Как мне исправить проблему?

1 Ответ

0 голосов
/ 23 ноября 2018

Добавление overflow-x: hidden к обоим body И html, похоже, решило проблему.

...