При нажатии на кнопку вся страница сдвигается на несколько пикселей влево
Я пытаюсь исправить проблему, из-за которой, когда пользователь нажимает кнопку, вся страница сдвигается влево. Проблема появляется только тогда, когда браузер развернут на максимум.
Вы можете попробовать сами здесь: https://professionalspeaking.oct.ca/exemplary.aspx
Нажмите кнопку «Великие учителя — по алфавиту +», чтобы увидеть изменение в действии.
Что значит ничего не видишь? Страница не загружается?
Вы не создали отзывчивый сайт, это все, что я вижу. Я уже много раз нажимал эту кнопку.
Когда я нажимаю, все остается как есть. Страница загружена. Но страница не перемещается влево.
Это потому, что длина страницы увеличивается и появляется полоса прокрутки
@Dpuiatti, страница не смещается, когда я нажимаю эту кнопку, как указано в вашем вопросе выше. Кнопка просто переключает отображение некоторого содержимого.
Странный. @ j08691 предполагает, что это связано с горизонтальной прокруткой. Я попробовал максимальную ширину: 100%; переполнение-x: скрыто; ни к чему успеху. Вы пытались нажать кнопку с развернутым браузером и выключенной консолью разработчика?
Нет, я говорю, что это из-за вертикальной полосы прокрутки, появляющейся в правой части браузера из отображаемого списка. Установка ширины на странице или скрытие горизонтального переполнения не остановит этого. А зачем тебе это? Как кто-нибудь сможет прокручивать страницу вниз, если вы скрыли полосу прокрутки?
@ j08691 большое спасибо за разъяснение. Это такая глупая оплошность с моей стороны. Спасибо!
Ответы 2
Страница смещалась из-за появления вертикальной полосы прокрутки. Спасибо @ j08691 за указание на это. Я решил проблему, применив overflow-y: прокрутите до html:
html {
overflow-y: scroll;
}
Как правило, не рекомендуется стилизовать тег html, вместо этого используйте body. HTML представляет собой сам документ, тогда как body является элементом отображения самого высокого уровня. Однако изо всех сил пытаюсь найти хорошую ссылку для этого ...
Страница добавляет вертикальную полосу прокрутки, когда высота содержимого превышает высоту окна браузера. Это поведение по умолчанию, но если смещение кажется вам странным, единственный способ «исправить» это — принудительно включить полосу прокрутки на <body>, когда содержимое не заполняет страницу, добавив следующий css:
body{
overflow-y: scroll;
}
я ничего не вижу?