Форум

lammeR · #1 (**permalink**) 28.11.2013, 14:58

Привет всем.
Собственно вопрос в заголовке.
Уточню, мне необходимо узнать ширину самого ползунка, а не его прокручиваемой области. Помогите, плз. Можно jquery, кому как удобно.

HTML-код:

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

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

Skipp · #2 (**permalink**) 28.11.2013, 16:09

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

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

lammeR · #3 (**permalink**) 28.11.2013, 16:23

Skipp, offsetWidth дочернего дива выводит 200.

ruslan_mart · #4 (**permalink**) 28.11.2013, 17:15

var div = document.getElementById('myDiv');
alert( div.scrollWidth - parseFloat(div.style.width) );

рони · #5 (**permalink**) 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 · #6 (**permalink**) 28.11.2013, 17:45

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

рони · #7 (**permalink**) 28.11.2013, 18:05

Сообщение от lammeR

Интересует теория

возьми максимум вычти видимое и подели пополам

danik.js · #8 (**permalink**) 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 · #9 (**permalink**) 28.11.2013, 20:59

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

Форум

Справочник

Discord чат

Курсы javascript