Можно ли поместить DIV вертикальную полосу прокрутки слева от div с помощью css? как насчет jscript?
DIV Вертикальная полоса прокрутки слева
Ответ 1
Вы можете добавить псевдопрокрутку в любом месте с помощью JQuery и этот плагин: JScrollPane
Ответ 2
У меня был простой пример использования, поэтому вы выбрали простое решение css:
<div style="direction: rtl; height: 250px; overflow: scroll;">
<div style="direction: ltr; padding: 3px;">
Content goes here
</div>
</div>
Ответ 3
Хорошо, поэтому, я написал плагин jQuery, чтобы дать вам совершенно естественную левую полосу прокрутки.
Левая демонстрация прокрутки левой полосы прокрутки
Вот как это работает:
-
Вставьте внутреннюю
div
внутри панели, чтобы разрешить вычисление ширины содержимого (content_width
). Затем, используя это, можно вычислить ширину полосы прокрутки:scrollbar_width = parent_width - content_width - horizontal_padding
. -
Сделайте две разные
divs
внутри панели, заполненные содержимым.-
Одна из целей - "позер". Он использовался исключительно для полосы прокрутки. Используя отрицательное левое поле, плагин вытаскивает его влево, так что отображается только полоса прокрутки (содержимое этого
div
обрезается на краю). -
Другой
div
используется для фактического размещения видимого содержимого прокрутки.
-
-
Теперь пришло время связать этих двух. Каждые 50 мс (
window.setInterval
) смещениеscrollTop
от "poser"div
применяется к видимому, прокручиваемому контентуdiv
. Итак, когда вы прокручиваете вверх или вниз с помощью полосы прокрутки слева, смещение прокрутки возвращается обратно наdiv
с видимым контентом.
Это объяснение, вероятно, отстой, и на самом деле это немного больше, чем я не описывал, но, без лишних слов, вот он:
$.fn.leftScrollbar = function(){
var items = $(this);
$(function(){
items.each(function(){
var e = $(this);
var content = e.html();
var ie = !jQuery.support.boxModel;
var w = e[ie?'innerWidth':'width'](), h = e[ie?'innerHeight':'height']();
//calculate paddings
var pad = {};
$(['top', 'right', 'bottom', 'left']).each(function(i, side){
pad[side] = parseInt(e.css('padding-' + side).replace('px',''));
});
//detect scrollbar width
var xfill = $('<div>').css({margin:0, padding:0, height:'1px'});
e.append(xfill);
var contentWidth = xfill.width();
var scrollerWidth = e.innerWidth() - contentWidth - pad.left - pad.right;
e.html('').css({overflow:'hidden'});
e.css('padding', '0');
var poserHeight = h - pad.top - pad.bottom;
var poser = $('<div>')
.html('<div style="visibility:hidden">'+content+'</div>')
.css({
marginLeft: -w+scrollerWidth-(ie?0:pad.left*2),
overflow: 'auto'
})
.height(poserHeight+(ie?pad.top+pad.bottom:0))
.width(w);
var pane = $('<div>').html(content).css({
width: w-scrollerWidth-(ie?0:pad.right+pad.left),
height: h-(ie?0:pad.bottom+pad.top),
overflow: 'hidden',
marginTop: -poserHeight-pad.top*2,
marginLeft: scrollerWidth
});
$(['top', 'right', 'bottom', 'left']).each(function(i, side){
poser.css('padding-'+side, pad[side]);
pane.css('padding-'+side, pad[side]);
});
e.append(poser).append(pane);
var hRatio = (pane.innerHeight()+pad.bottom) / poser.innerHeight();
window.setInterval(function(){
pane.scrollTop(poser.scrollTop()*hRatio);
}, 50);
});
});
};
Как только вы включили jQuery и этот плагин на странице, примените левую полосу прокрутки:
$('#scrollme').leftScrollbar();
Замените #scrollme
селектором CSS на элемент (ы), который вы хотите применить к левой полосе прокрутки.
(и, очевидно, это ухудшается красиво)