Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как узнать длину самого скроллбара? (https://javascript.ru/forum/misc/43246-kak-uznat-dlinu-samogo-skrollbara.html)

lammeR 28.11.2013 14:58
Как узнать длину самого скроллбара?
 
Вложений: 1
Привет всем.
Собственно вопрос в заголовке.
Уточню, мне необходимо узнать ширину самого ползунка, а не его прокручиваемой области. Помогите, плз. Можно jquery, кому как удобно.

HTML-код:
<div style="width:200px; overflow-x:scroll; white-space:nowrap;">
  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!!!!!!!!!!!!!!!!!!!!!!!
</div><br />

<input type="button" value="Длина скроллбара" />

Skipp 28.11.2013 16:09 
<div style="width:200px; overflow-x:scroll; white-space:nowrap;">
  	<div>
		AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!!!!!!!!!!!!!!!!!!!!!!!
	</div>
</div>


И вам необходимо всего лишь узнать ширину блока который внутри.

lammeR 28.11.2013 16:23
Skipp, offsetWidth дочернего дива выводит 200.

ruslan_mart 28.11.2013 17:15 
var div = document.getElementById('myDiv');
alert( div.scrollWidth - parseFloat(div.style.width) );

рони 28.11.2013 17:19
lammeR,
длину ползунка можно узнать у разработчиков браузеров а вот толщину вычислить можно ...
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>datepicker demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div style="width:200px; overflow-x:scroll; white-space:nowrap; border: #FF0000 1px solid" id="test">
  <div style=" border: #0000FF 1px solid">
		AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!!!!!!!!!!!!!!!!!!!!!!!
	</div>
</div><br />

<input type="button" value="Длина скроллбара"  />

<script>
alert($('#test').height()-$('#test div').outerHeight());
</script>
</body>
</html>

lammeR 28.11.2013 17:45
Сие есть печалька.... . Тогда поменяю вопрос: как, не зная ширины скроллбара, можно выставить его строго по центру без использования мыши? Интересует теория, а не реализация.

рони 28.11.2013 18:05
Цитата:
Сообщение от lammeR
Интересует теория
возьми максимум вычти видимое и подели пополам

danik.js 28.11.2013 18:10
Цитата:
Сообщение от lammeR
Сие есть печалька....
Цитата:
Сообщение от lammeR
Тогда поменяю вопрос
Я бы поменял его на такой: Как прокрутить элемент на половину (чтобы середина содержимого оказалась в середине контейнера). А поцизионирование скроллбара - это всего лишь следствие.

<!DOCTYPE html>
<div style="width:200px; overflow-x:scroll; white-space:nowrap; border: #FF0000 1px solid" id="test">
  <div style=" border: #0000FF 1px solid">
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!!!!!!!!!!!!!!!!!!!!!!!
    </div>
</div>
<script>
    var outer = document.querySelector('div');
    outer.scrollLeft = (outer.scrollWidth - outer.offsetWidth) / 2;
</script>

lammeR 28.11.2013 20:59
danik.js, и действительно, я чего-то отделил скроллбар от содержимого при постановке вопроса. Спасибо.


Часовой пояс GMT +3, время: 05:48.