html — как зафиксировать блок в блоке со скролом при прокрутке?
имеется блок div со скроллом. внутри него много текста и блок, который должен быть зафиксирован при скролле. как это сделать?
<div> <div>text</div> ... <div></div> <div>text</div> </div>
Были попытки дать fixed-block position: fixed, но он становится фиксированным относительно окна браузера.
Были попытки дать fixed-block position: absolute, блок становиться поверх всего текста (как мне и надо), но но при скролле он тоже улетает.
как быть?
- html
- css
Вы можете создать контейнер для скролла, и уже в нем располагать элементы абсолютно. Например, так:
div.container {
width: 100%;
height: 100px;
position: relative;
}
div.scroll {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: scroll;
}
div.
fixed-block {
width: 30px;
height: 30px;
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
background-color: green;
}
<div>
<div></div>
<div>
<p>Не поддавайтесь панике, даже если очень хочется. В самых разных уголках мира маглов вдруг начали появляться следы волшебства. Мы беспокоимся, что в скором времени это заметят даже крайне безразличные маглы. Волшебники и волшебницы, нам нужна ваша помощь!</p>
<p> Если не обуздать это бедствие, наступят страшные времена, как сами знаете когда при Сами-Знаете-Ком. Повторите знакомые вам заклинания, берите палочку и вступайте в наши ряды!</p>
</div>
</div>Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
JavaScript обёртка скроллбара в виде jQuery плагина / Хабр
Проблема стилизации скроллбара браузера до сих пор актуальна, несмотря на огромное количество скриптов, предназначенных для решения данной задачи.
Существует два основных подхода для стилизации скроллбара средствами HTML/CSS, каждый из которых имеет свои плюсы и минусы:
- Эмуляция скролла средствами JavaScript
- JavaScript обёртка над родным скроллом
Эмуляция скролла средствами JavaScript
Огромным преимуществом данного подхода является то, что это полностью JavaScript решение. Благодаря этому данное решение легче в разработке и является максимально кроссбраузерным (в том плане, что поведение скролла во всех браузерах будет одинаковым, не зависимо от особенностей реализации скролла браузера), оказывая минимальное влияние на HTML структуру и применяемые CSS стили. Подобным подходом пользуются jScrollPane, FleXcroll, Tiny Scrollbar и многие другие.
Однако сильная сторона данного подхода является одновременно и его слабой стороной:
- Сложность или невозможность эмулировать/перехватить все события
- JavaScript эмуляция работает медленнее родного скролла
JavaScript обёртка над родным скроллом
Данный подход заключается в том, что родной скролл скрывается средствами HTML/CSS, продолжая выполнять своё предназначение — прокрутку содержимого.
Одна из неплохих реализаций подобного подхода была описана совсем недавно в статье Кроссбраузерная кастомизация системного скроллбара с достаточно подробным объяснением.
Изобретение трёхколёсного велосипеда
велосипеда явилось то, что поиск по скриптам для стилизации скролла показал более 20 разнообразных плагинов, ни один из которых не подошёл для заказанного проекта.
Большинство из известных плагинов не подошли по причине медленной работы при большом количестве инициализированных скроллов на странице. Другие же не подошли из-за неудобной реализации или недостаточной кроссбраузерности.
Было решено сделать собственную реализацию, отвечающую следующим требованиям:
- Поведение скролла должно быть максимально приближённым к родному
- Вертикальный и горизонтальный скроллбар
- Минимальная нагрузка на процессор
- Полная стилизация внешнего вида средствами HTML/CSS
- Возможность применить свою HTML структуру для скроллбара, либо указать плагину использовать уже существующий элемент в качестве скроллбара
- Автоматическое изменение скролла при изменении содержимого или изменении размеров самого контейнера без необходимости переинициализации скрипта
- Ширина и высота контейнера может быть установлена как в пикселях, так и в процентах, либо ограничена средствами CSS max-height/max-width
- Скролл может находиться как в любом месте внутри контейнера, так и за его пределами
- Автоматическое вычисление размеров скроллбара, либо значение, устанавливаемое через CSS стили
- Поддержка IE7+, Firefox, Chrome, Opera, Safari
- Возможность «из коробки» отключения скролла для мобильных браузеров
В качестве подхода было выбрано решение сделать плагин в виде JavaScript обёртки над родным скроллом — т.
е. оставить функциональность родного скролла, скрыть родной скролл средствами CSS и показать стилизованный скролл. Это даёт преимущество в том, что не нужно эмулировать поведение стандартного скролла, а лишь отлавливать изменения в позиционировании с помощью JavaScript.
Избежать полной эмуляции скролла всё же не получилось — необходимо эмулировать поведение скролла, когда мышь находится над стилизуемым скроллом: отлавливать скролл мыши, drag&drop, клики по самому скроллу и стрелочкам. Идеального решения «Подключил и забыл», конечно же, не получилось. Но практически всех поставленных целей удалось добиться в полной мере.
Демонстрация
Исходные файлы
Сравнение функциональности популярных скроллбаров
На заметку
Следует помнить, что для работы стилизованного скроллбара необходима определённая HTML структура, для которой исходный контейнер JavaScript-ом оборачивается в другой контейнер при инициализации.
- Исходный контейнер не должен содержать инлайновые стили
- Следует избегать использования padding/margin для контейнера. Если нужен отступ, лучше добавить внутрь ещё один контейнер с необходимым отступом
- При изменении содержимого контейнера не стоит обращаться к контейнеру по классу, т.к. эти классы будут использоваться и контейнером-обёрткой
К небольшим недочётам можно отнести разность высоты/ширины прокрутки колёсиком мыши в случаях, когда мышь находится над содержимым контейнера (родное поведение) и когда мышь находится над скроллбаром (эмулируемый скролл). Есть несколько идей, которые довольно сложны в реализации, поэтому оставляю их «на потом».
Также пока не удаётся избавиться от неприятного эффекта прокрутки контейнера при выделении текста в WebKit браузерах Chrome и Safari. Частично удалось это сделать при использовании outer-скролла (есть в демонстрации).
Примечания
Из-за разности поведения скролла не только в разных браузерах, но и в разных версиях одного и того же браузера (да-да, того самого браузера), пришлось перепробовать множество комбинаций margin/padding/border/position для вычисления схожего поведения. Во время поиска решения, нашлось несколько интересных особенностей:
- В ИЕ8 — баги с использованием max-height: в некоторых случаях рендерер 8-й версии ИЕ крашится, либо пытается сделать высоту контейнера равной max-height (официальный баг релиз версии)
- WebKit-браузеры (Chrome, Safari) при выделении текста делают прокрутку внутреннего контейнера, «обнажая» скрытый скроллбар
- Если содержимое превышает размеры контейнера, то отображение правого и нижнего паддинга остаётся на усмотрение самого браузера
- При поиске плагинов, чтобы быстро узнать используется ли стандартный механизм скроллинга, достаточно нажать на скролл мыши, находясь над прокручиваемым контентом
Обновление до версии 0.
1.3 (20130425): - улучшена эмуляция скролла: теперь скролл колёсиком мыши над эмулируемым скроллом работает почти идентично натуральному скроллу; также изменено поведение при нажатии и удержании мыши на подложке скроллбара
- исправлено CSS позиционирование, при котором происходил «лишний» сдвиг контейнера при выделении текста в WebKit браузерах Google Chrome / Safari
Обновление до версии 0.1.4 (20130430):
- отслеживание горизонтального скролла мышью над горизонтальным скроллбаром
- добавлена опция disableBodyScroll для отключения скролла страницы, когда прокручивается контейнер. В данной опции пришлось отключить родное поведение браузера и эмулировать скролл через JavaScript
Обновление до версии 0.1.6 (20131018):
- добавлена опция игнорирования инициализации скролла на мобильных устройствах
- добавлена поддержка drag для скролла на тач-устройствах
Обновление до версии 0.
1.7 (20140307): - добавлен хак для исправления появления скроллбара при 1-пиксельном зазоре в ИЕ
Обновление до версии 0.1.8 (20140308):
- исправлен баг с отображением горизонтального скроллбара если высота содержимого меньше высоты контейнера (случаи с height:100%)
Обновление до версии 0.1.9 (20140310):
- исправлен баг с отображением вертикального скроллбара если контент содержит div с height:100%; overflow: hidden;, внутри которого div с высотой, превышающей высоту внешнего контейнера (спасибо за отзывы и замечания Evangeline Rei)
- добавлена опция autoUpdate отвечающая за автоматическую реинициализацию скроллбара при изменении размеров контента/контейнера
Обновление до версии 0.2.0 (20140312):
- добавлена опция onUpdate для возможности пересчёта размеров скроллбара вручную. благодаря данной опции был добавлен скроллбар в виде карты страницы
- добавлена опция stepScrolling отвечающая за пошаговую прокрутку к месту, где удерживается нажатой кнопка мыши на скроллбаре. если опция отключена, то содержимое будет прокручено сразу до местоположения мыши, в противном случае будет происходить пошаговая прокрутка с ускорением до места удерживания мыши (эмуляция поведения скролла)
- скрытие/отображение скроллбаров полностью перенесено в CSS
- изменено поведение onInit — теперь запуск функции происходит только один раз при инициализации
если опция отключена, то содержимое будет прокручено сразу до местоположения мыши, в противном случае будет происходить пошаговая прокрутка с ускорением до места удерживания мыши (эмуляция поведения скролла)Обновление до версии 0.2.1 (20140323):
- исправлена ошибка с прокруткой к #anchor-элементу, когда становится видимым горизонтальный скролл
Обновление до версии 0.2.2 (20140411):
- исправлена ошибка с инициализацией нескольких скроллбаров с настройками по умолчанию
- добавлен элемент scroll-element_corner для удобной CSS настройки уголка если видны оба скроллбара
Обновление до версии 0.2.3 (20140703):
- исправлена ошибка с видимым скроллбаром при изменении zoom-а в браузере
- исправлена ошибка с неверной инициализацией размеров скроллбара для ИЕ при использовании CSS * { box-sizing: border-box; }
- добавлена callback функция onScroll, которая позволяет легче определять степень прокручивания контейнера
- скроллбар может быть использован как директива для отличного фреймворка Angular. JS
- добавлена возможность переопределять значения по-умолчанию через глобальную переменную jQueryScrollbarOptions до загрузки плагина
- оптимизирована проверка изменения размеров контейнера
JSОбновление до версии 0.2.4 (20140715):
- добавлена возможность стилизации скроллбара для TEXTAREA
наконец-то
html — CSS — Почему мой контент не прокручивается?
ОБНОВЛЕНИЕ 2 Я только что исправил «Edit 2» снизу, где содержимое div bodySection прокручивалось вверх поверх div navLogo/navElements. Позиция: относительная была виновником, и теперь у меня нет позиции (поэтому по умолчанию статическая, насколько я понимаю) в классе bodySection, и она работает, как и ожидалось.
Я все еще думаю, что некоторые вещи в моем коде немного странные (обновленные скрипт и код, встроенные ниже). Например, чтобы все выровнялось так, как я хочу, у меня есть очень-очень странные свойства ширины;
Для левой, средней и правой секций установлено значение ширины 30%, поэтому они занимают примерно 1/3 доступного пространства.
Это имеет смысл.
Класс bodySection имеет ширину 98 %, а также 1 % заполнения слева и 2 % заполнения справа. Почему это не 100% ширина и 1% отступ с обеих сторон? Он находится внутри div-контейнера шириной 100%. Я полагал, что он унаследует границы от родительского div.
Класс .navElements имеет ширину 95%, и если я увеличу его до 100%, он будет вести себя очень смешно, выталкивая текст за пределы видимого экрана. Почему это?
Класс .navLogo имеет ширину 100%, и даже изображение имеет тег 100%, но я могу сказать вам, что размер, который вы видите, не на 100% соответствует фактическому размеру изображения. Это IS размера, который я хочу, но это не 100%, почему так?
Даже на 32-дюймовом мониторе (мой внешний монитор для моего ноутбука) я вижу горизонтальную полосу прокрутки (внизу). Очевидно, мне это не нужно. Почему это здесь?
Обновленный Fiddle: Fiddle Here
Обновлен код:
HTML:
<голова>
<мета-кодировка="utf-8">
<мета-имя="описание" содержание="">
<мета имя="ключевые слова" содержание="">
Frick Solutions — технологический консалтинг для малого бизнеса
css"/>
<тело>
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст какой-то текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст какой-то текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст какой-то текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст какой-то текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст какой-то текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст какой-то текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст какой-то текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст
вот какой-то текст какой-то текст
<идентификатор div = "leftSection">
левый текстовый тест
<идентификатор div = "midSection">
тест середины текста
navLogo
{
отступ слева: 1%;
заполнение справа: 1%;
положение: фиксированное;
цвет фона: #373737;
ширина: 100%;
высота: 8%;
}
.navElements
{
заполнение справа: 1%;
семейство шрифтов: "Roboto", без засечек;
цвет фона: прозрачный;
положение: абсолютное;
внизу: 0px;
ширина: 95%;
заполнение снизу: 0,25%;
}
.navElements li
{
белый цвет;
цвет фона: прозрачный;
отображение: встроенный блок;
отступ: 5px 10px 0 0;
}
.navElements a {украшение текста: нет; }
ссылка
{
белый цвет
}
а: посетил
{
белый цвет
}
а: наведите
{
цвет: серый;
}
.bodySection{
отступ слева: 1%;
заполнение справа: 2%;
обивка верха: 5%; /*это здесь как хак, чтобы убедиться, что div bodySection отображается под divs navLogo/navElement*/
ширина: 98%; /*
положение: относительное;*/
/* переполнение: скрыто;*/
}
#leftSection, #midSection, #rightSection {
ширина: 30%;
минимальная ширина: 30%;
высота: 100 пикселей;
граница: 1px сплошной красный;
поле слева: 10px;
плыть налево;
отступ слева: 1%;
заполнение справа: 1%;
обивка-верх: 1%;
обивка снизу: 1%;
}
.
контейнер{
ширина: 100%;
высота: авто;
/*переполнение: скрыто;*/ }
}