Линейка прокрутки браузера для прокручивания Div'a

12
Asar
На сайте с 23.08.2004
Offline
334
5572

Имеется сильнофиксированный дизайн страницы. Фиксированный даже по высоте. Соответственно, нужно, чтобы содержимое, которое не влезает в основной Div, прокручивалось в нем. Без использования Flash'a.

Всем известно, что можно прилепить линейку прокрутки к самому Div'у. В т.ч. и нестандартного дизайна где-то видел. А вот можно ли как-то использовать основную линейку прокрутки окна браузера для того, чтобы крутить содержимое Div'a?

Г-да, если кто-то маялся такой ***-й или просто мысли имеются на этот счет -- отзовитесь...

malls
На сайте с 08.08.2005
Offline
255
#1

прокрутка (скроллинг) это DOM событие, его надо просто перехватить и вместо оригинальной реакции прописать например замену текста дива, или возможно даже лучше его месторасположения. (т.е. например, в оригинале он высотой 1000px - а показывается только 500, остальное закрыто дизайном с большим z-index)

как то так:

window.onscroll = function (e) {
// тут уже извращайтесь
}
ИЕ
На сайте с 16.01.2009
Offline
3
#2

если я вас правильно понял, вы хотите, чтобы если контент не влезал в див, то добавлялась полоса прокрутки?

это легко реализуется добавлением к диву CSS свойства overflow

Аргументы

visible

Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

hidden

Отображается только область внутри элемента, остальное будет обрезано.

scroll

Всегда добавляются полосы прокрутки.

auto

Полосы прокрутки добавляются только при необходимости.

Верстающая домохозяйка.
[Удален]
#3

Вопрос только как заставить у браузера появиться полосу прокрутки коли дизайн по высоте фиксированный.

Если у вас он прям совсем фиксированный, то поставьте всему кроме дива position:fixed тогда размер страницы будет зависеть от размера дива и скролл страницы будет визуально прокручивать див (хотя на самом деле прокручивается страница). Только с этим фикседом проблемы в IE

Можно все кроме этого дива как то обобщить в один элемент с position:absolute и сделать типа

window.onscroll=function (ev)

{

document.getElementById('all_fixed').style.top=window.pageYOffset+'px';

}

но дергаться будет

malls
На сайте с 08.08.2005
Offline
255
#4

😂😂😂

neolord тебе не кажется что на текущий момент в топике собрались:

1. ТС

2. Два идиота программиста

3. Один умный человек знающий CSS

????

Игорь Ермаков - зачет! Пристыдили!

Пойду перечитаю про стили - надо вернуться в грешный мир. :)

[Удален]
#5
Asar:
Всем известно, что можно прилепить линейку прокрутки к самому Div'у

Мне кажется ТС знает про это свойство, как и мы с вами (я надеюсь), и его интересует таки прокрутка не дива а окна =)

T.R.O.N
На сайте с 18.05.2004
Offline
314
#6
Asar:
А вот можно ли как-то использовать основную линейку прокрутки окна браузера для того, чтобы крутить содержимое Div'a

Возможно. В основе будет лежать рецепт, указанный malls. Тут есть маленькая загвоздка. Любой скролер, имет шаг и окно (ширину ползунка), который вычисляются, исходя из объема скролингуемого объекта.

Сроллер окна никак не сможет иметь тот-же шаг и окно, как у скроллера дива.

Поэтому, все хуки и подобное будут бесполезны.

На мой взгляд, решать задачку стоит, нарисовав вертикальный скроллер самостоятельно, иметировав дизайн винды, а потом уже делать с ним все что угодно. Путь не самый простой, зато не имеющий никаких системных ограничений.

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
[Удален]
#7

Скролл кстати прокручивается не только шагом если что =) Можно и мышой его таскать плавно. В случае прокрутки окна это совершенно не важно, потому что window.pageYOffset дает точное смещение в пикселях, настолько же надо задирать див, и будет нормально. Просто кнопки pageUp и pageDown будут не на страницу откручивать а поменьше. Если совсем заморочиться можно умножать этот оффсет на div.offsetHeight / document.body.offsetHeight

Только я по прежнему не понимаю откуда у окна возьмется скроллбар если видимый размер дива фиксирован и заведомо меньше окна. Юзерный скроллбар идея получше, но виндовый интерфейс делать не айс потому что есть люди со styleXP и даже (о ужас) линуксом и плюс скроллы по разному выглядят в разных браузерах. Лучше стилизованный

T.R.O.N
На сайте с 18.05.2004
Offline
314
#8
neolord:
Скролл кстати прокручивается не только шагом если что =)

только шагом, если что. Шаг, это минимально изменеие перемещения. Хоть мышой его тягай, хоть усилием воли.

T.R.O.N добавил 02.03.2009 в 12:42

neolord:
но виндовый интерфейс делать не айс потому что есть люди со styleXP и даже (о ужас) линуксом и плюс скроллы по разному выглядят в разных браузерах.

Не айс, безусловно. Избавится от стилей системы - не сложно, тут еще один косяк. У IE, по умолчанию, всеравно есть скролер, даже если он не нужен. Хотя и отображается как неактивный

[Удален]
#9
T.R.O.N:
только шагом, если что. Шаг, это минимально изменеие перемещения. Хоть мышой его тягай, хоть усилием воли.

Ну в таком случае он составляет 1 пиксель при любом размере окна. В фоксе и опере по крайней мере. Проверено

neolord добавил 02.03.2009 в 13:01

T.R.O.N:
Не айс, безусловно. Избавится от стилей системы - не сложно, тут еще один косяк. У IE, по умолчанию, всеравно есть скролер, даже если он не нужен. Хотя и отображается как неактивный

Но у IE они благо настраиваются через CSS

T.R.O.N
На сайте с 18.05.2004
Offline
314
#10
neolord:
В фоксе и опере по крайней мере. Проверено

Вы смогли сдвинуть мышой на 1px? Круто. Я без приколов, действительно круто!

neolord:
Но у IE они благо настраиваются через CSS

Простите, Вы о чем. Что именно настраивается??????

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий