Как добавить скролл в div

Прокрутка в div

Снова здраствуйте. У меня появилась такая потребность, вот есть много контента в диве фиксированной высоты и мне надо убрать там скролл,но нужно оставить прокрутку колесиком, это вообще можно сделать?

Отслеживать
задан 23 сен 2011 в 20:11
Илья Николаев Илья Николаев
49 1 1 золотой знак 1 1 серебряный знак 7 7 бронзовых знаков
Сразу предупреждаю — готовьте бубен и разводите костер %)
23 сен 2011 в 20:12
ЖЖотке однако)))
23 сен 2011 в 20:14

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

 
 
Тут ваш контент
 
 

1. Ширина внешнего DIV’a на 16px меньше внутреннего. То есть мы скрываем это скролл и все. гениально правда?

Отслеживать
ответ дан 23 сен 2011 в 20:18
Миха Николаев Миха Николаев
994 12 12 серебряных знаков 27 27 бронзовых знаков
только вот в Сафари это фишка не проходит.
23 сен 2011 в 20:19

Протестил.
не работает(чему я не удивлен).. Так что — нет, не гениально 😀
Впринцыпе приемлимый вариант если: вам плевать на сафари и устраивает что прокрутка происходит только при наведении на елемент с невидимым скролом

23 сен 2011 в 20:20
@AlexWindHope с чего ты взял что это не работает? ты в чем проверял?
23 сен 2011 в 20:24

В сафари(в нем всегда такие вот «ритуалы» и проверяю сразу :))
В остальном все вроде ок. Даже в IE работает 😀
Единственное что не уверен так это как в стареньких операх работает.

23 сен 2011 в 20:26
Спасибо за помощь)
23 сен 2011 в 20:31

вам попутно в этут тему Верстка дизайна сайта только вместо body нужный div и вместо x поставит y

Отслеживать
ответ дан 23 сен 2011 в 20:13
9,350 3 3 золотых знака 25 25 серебряных знаков 44 44 бронзовых знака

нееее, тогда прокручиватся не будет, не даром я написал про готовность к шаманским ритуалам 😀
Если не ответят и будет время завтра ченить придумаю для решения этого вопроса.
Можно кстати и чисто CSS’ом реализовать, но это будут именно шиманские ритуалы 🙂

Как сделать scroll в блоке?

Помогите реализовать блок как на скриншоте

• Вопрос задан более трёх лет назад
• 9078 просмотров

Комментировать

Решения вопроса 2

Добавляете блоку фиксированную высоту и:
overflow: scroll;

Ответ написан более трёх лет назад

Нравится 3 2 комментария

через overflow-y: scroll; правильнее.

Размеры и прокрутка элементов

Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики».

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

Простой пример

В качестве простого примера демонстрации свойств мы будем использовать следующий элемент:

 
 #example 

У элемента есть рамка (border), внутренний отступ (padding) и прокрутка. Полный набор характеристик. Обратите внимание, тут нет внешних отступов (margin), потому что они не являются частью элемента, для них нет особых JavaScript-свойств.

Результат выглядит так:

Внимание, полоса прокрутки

В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «content width» выше).

Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет 300px , но если предположить, что ширина полосы прокрутки равна 16px (её точное значение зависит от устройства и браузера), тогда остаётся только 300 — 16 = 284px , и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Без неё некоторые вычисления будут проще.

Область padding-bottom (нижний внутренний отступ) может быть заполнена текстом

Нижние внутренние отступы padding-bottom изображены пустыми на наших иллюстрациях, но если элемент содержит много текста, то он будет перекрывать padding-bottom , это нормально.

Метрики

Вот общая картина с геометрическими свойствами:

Значениями свойств являются числа, подразумевается, что они в пикселях.

Давайте начнём исследовать, начиная снаружи элемента.

offsetParent, offsetLeft/Top

Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.

В свойстве offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге.

То есть, ближайший предок, который удовлетворяет следующим условиям:

Свойства offsetLeft/offsetTop содержат координаты x/y относительно верхнего левого угла offsetParent .

В примере ниже внутренний имеет элемент в качестве offsetParent , а свойства offsetLeft/offsetTop являются сдвигами относительно верхнего левого угла ( 180 ):

 
.