Как правильно рассчитать размер (высоту) ручки полосы прокрутки?

Question

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

Теперь, если я изменим размер окна моего браузера до меньшего размера, это будет выглядеть так:

Как вы можете видеть, поскольку переполняется контейнер, изменяющий размеры (из-за изменения размера окна браузера), размер ручки (обведен красным) также изменен. Это позволяет прокрутить вниз до нижнего элемента внутри переполненного контейнера

Я создал аналогичный компонент, используя jQuery-Ui:

Но моя проблема в том, что я не смог рассчитать НОВЫЙ размер ручки для изменения размера контейнера:

Здесь вы можете видеть, что я почти , но ручка действительно должна быть меньше, чтобы можно было прокручивать ее до конца (как в Facebook).

Мой вопрос: Какую формулу вы предлагаете использовать для достижения этой цели?

Вот что я до сих пор пробовал:

function calculate_grip_size() {
  h = (parseFloat($('#box-container').css('height')) / parseFloat($('#box').css('height'))) * 100;
  $('#grip').css('height', h);
}

и соответствующий ему HTML:

<div id="box-container">
  <div id="area-track">
    <div id="grip">
    </div>
  </div>
  <div id="box">
    <div class="ipsum">
      Lorem ipsum...
    </div>
    <div class="ipsum">
      Lorem ipsum...
    </div>
    <div class="ipsum">
      Lorem ipsum...
    </div>
    <div class="ipsum">
      Lorem ipsum... 
    </div>
    <div class="ipsum">
      Lorem ipsum... 
    </div>
    <div class="ipsum">
      Lorem ipsum 
    </div> 
  </div>
</div>

Answer 1

Посмотрите на анатомию полосы прокрутки.http://csdgn.org/inform/scrollbar-mechanics

Размер ручки обычно составляет multiplication factor * content ratio.Если ваш контент 200px, а внешний блок 100px, то ваш коэффициент равен 2,0.Как только контент станет достаточно большим, размер ручки уменьшится до очень малых пропорций, поэтому вам нужно минимальное значение для него.

multiplication factor будет произвольным числом единиц, которые вы можете настроитьтак что полоса прокрутки визуально приятна во всех отношениях.

Answer 2

Я проверял этот плагин под названием slimScroll ранее, и автор использует этот метод - переведенный, чтобы соответствовать вашим селекторам (я думаю);хотя было бы лучше обобщить селекторы, используя имена классов вместо идентификаторов:

var minH = 50,
    h = Math.max( $('#box-container').outerHeight() / parseInt($('#box').prop('scrollHeight'),10) * 100, minH );
$('#grip').height(h);

Обновление: К сожалению, плохая математика и забыл проанализировать значение scrollHeight.Попробуйте сейчас.

Обновление № 2: Хорошо, думаю, я нашел проблему ... ну, две проблемы.

1. Приведенный выше расчет не принял во вниманиечто ручка находилась внутри области дорожки, которая не совпадает с высотой контейнера коробки

   $('#grip').height($('#area-track').height() * h);
   

2. Контент располагался в соотношении 1: 1 ссцепление, поэтому его нужно разделить на соотношение содержимого

   increment = parseInt(ui.helper.css('top')) / -h;
   

А вот демо , которое я сделал , используя код, которым вы поделились.1026 * О, и мне пришлось добавить padding-bottom: 25px; к определению #box css, чтобы было видно все поле ipsum - при необходимости отрегулируйте, потому что это зависит от того, сколько там отступов.

Answer 3

Не используйте .css('height'), используйте .height(), это возвращает вычисленную высоту, а не значение css.