переполнение: прокрутка предотвращает показ слайдера - PullRequest
0 голосов
/ 21 ноября 2011

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

Используется CSS

/*slide-out-div */
 .slide-out-div {overflow:scroll;padding: 20px;background: #ccc; border:1px solid black;width:250px;}  

HTML-форма

<div class="slide-out-div">

веб-сайт: www.dealerclick.com

1 Ответ

0 голосов
/ 21 ноября 2011

Проблема здесь, как я уверен, вы знаете, в том, что у вас есть абсолютный «дескриптор», расположенный отрицательно справа от контейнера формы.Поэтому, когда вы устанавливаете переполнение на авто (или прокручиваете), как я полагаю, это скрывает дескриптор.

Это не ошибка, это способ работы css.Хотя есть несколько способов решить эту проблему, я думаю, что лучше всего добавить overflow: auto к .slide-out-div form, чтобы полосы прокрутки были только у формы (когда вы это сделаете, вы увидите, что заданная ширина слишком велика).а также узкий).

Установка переполнения на auto - это то, что нужно, потому что установка переполнения для прокрутки заставляет полосы прокрутки даже тогда, когда они не нужны, что не очень хорошая практика.все хорошо, но другая проблема здесь в том, что когда вы устанавливаете overflow: auto, а страница недостаточно высока, поскольку div имеет фиксированную позицию, он все равно не будет работать так, как вы хотите.Так что на самом деле лучший способ решить эту проблему - использовать небольшой JS для определения высоты окна, например:

var window_height = window.innerHeight;
if (window_height < 668) {
   $('.slide-out-div form').css('overflow', 'scroll');
}

Что нужно сделать, это проверить, не слишком ли мала высота окна для отображения полного окнавысота формы плюс ее смещение от вершины (которая на вашей странице составляет 668 пикселей), и, если это так, добавляет полосы прокрутки.Если нет, то никаких полос прокрутки и никаких проблем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...