ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Скроллируемый див. Как можно определить есть ли скролл или нет?
9 сообщений из 9, страница 1 из 1
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37321770
unicornmirage
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
unicornmirage
Участник
Всем привет!

Есть такой элемент:

Код: plaintext
1.
2.
<div id="container" style="overflow: auto;width: 100%; height: 100%; border: solid 0px white;">
    ....контент
</div>

Задача:

1) определить в рантайме - есть ли у div-а в настоящий момент scroll или нет
либо
2) корректно определить ширину div-а, с учетом ширины scrloll-а (или без него)

Иначе возникает проблема - если есть скролл, то контент скачет на небольшое значение влево/вправо. А так бы я сделал проверку скриптом - если есть скролл - то корректировал бы смещение контента на ширину скролла.
...
Рейтинг: 0 / 0
23.06.2011, 13:43:30
| Ответить | Цитировать | Написать  
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37321771
unicornmirage
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
unicornmirage
Участник
пробовал определять ширину дива через jQuery("#container").width() - но он и при скролле и без скролла - возвращает одинаковое значение.
...
Рейтинг: 0 / 0
23.06.2011, 13:44:49
| Ответить | Цитировать | Написать  
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37321867
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
unicornmirage1) определить в рантайме - есть ли у div-а в настоящий момент scroll или нет
либо
2) корректно определить ширину div-а, с учетом ширины scrloll-а (или без него)
Типа намёк...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
#container {
	width: 100px;
	height: 100px;
	overflow: auto;
}
#content {
	width: 200px;
	height: 200px;
}
</style>
<script type="text/javascript">
function Go() {
	var o=document.getElementById('container')
	alert(o.clientWidth+' '+o.offsetWidth+' '+o.scrollWidth)
}
</script>
</head>
<body>
<div id='container'>
	<div id='content'>content</div>
</div>
<input type='button' value='Go' onclick='Go()' />
</body>
</html>
...
Рейтинг: 0 / 0
23.06.2011, 14:10:25
| Ответить | Цитировать | Написать  
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37322028
unicornmirage
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
unicornmirage
Участник
krvsa,

большое спасибо, это то, что нужно! :)
...
Рейтинг: 0 / 0
23.06.2011, 15:09:06
| Ответить | Цитировать | Написать  
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37834082
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Korcar
Участник
Не работает, если размеры content не заданы или заданы в процентах. еще варианты есть?
...
Рейтинг: 0 / 0
11.06.2012, 09:18:56
| Ответить | Цитировать | Написать  
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37834130
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Korcar , т.е. примеров от тебя не ждать?
...
Рейтинг: 0 / 0
11.06.2012, 10:48:22
| Ответить | Цитировать | Написать  
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37834275
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Korcar
Участник
та пример всё тот же, что и в топикстарте
див с оверфлоу авто, высота фиксирована, ширина меняется и контент тоже меняется. в связи с чем возникает ситуация, когда контент больше, чем ширина дива (не на много, но скролл горизонтальный появляется). вот как сделать, чтобы пару строк кода исправили эту ситуацию
krvsa , пример, приведенный работает, если у второго дива заранее заданы размеры в пикселях. если не заданы заранее (а они не заданы) или заданы в процентах, то o.clientWidth - видимая область минус ширина скроллбара, o.offsetWidth - видимая область, content.offsetWidth - так же только видимая область

Сделал увеличение ширины первого дива значением o.scrollWidth-o.offsetWidth, но чета ощущение, что это криво. Изящнее решения есть?
...
Рейтинг: 0 / 0
11.06.2012, 13:32:02
| Ответить | Цитировать | Написать  
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37839611
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
Так чего "не работает"-то?
Вам же привели пример.
Если у элемента offsetWidth меньше, чем scrollWidth -- это математический факт наличия скроллбара (при условии незапрещающего overflow).
...
Рейтинг: 0 / 0
15.06.2012, 14:12:26
| Ответить | Цитировать | Написать  
Скроллируемый див. Как можно определить есть ли скролл или нет?
    #37839630
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
А ширина скроллбара -- это, соответственно, offsetWidth - clientWidth когда известно, что скроллбар есть (вычитаем width для вертикального скролла, height для горизонтального).
...
Рейтинг: 0 / 0
15.06.2012, 14:23:13
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Скроллируемый див. Как можно определить есть ли скролл или нет?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=37321867&tid=1449690]:
 0ms
get settings:
 4ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 31ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 29ms
get tp. blocked users:
 1ms
others: 189ms
total:  275ms
созд. / загр.: 275ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]