css - Полоса прокрутки позиции, чтобы выделить место для содержащего элемента (снаружи, а не внутри)

Question

Я просто играю с некоторым css и создал элемент, который прокручивается и отображается как вид «иллюминатора». Однако полоса прокрутки покрывает часть элемента.

Я пробовал набивку, разметку и обертывание ее в другой div, но не могу получить результат, на который я надеялся. Я также попытался применить тот же самый радиус границы и размеры к обертке div и применить к нему дополнение, но затем содержимое выходит за пределы внутреннего div.

Это сделает его гораздо более ясно: http://jsfiddle.net/c78e3/1/

Текущего CSS:

div.two { 
    margin:20px; 
    width:300px; 
    height:300px; 
    border-radius:150px; 
    overflow-y:scroll; 
    background:url('https://s3.amazonaws.com/giphymedia/media/v0YiARQxj1yc8/giphy.gif') top center no-repeat; 
    box-shadow:inset 0 0 20px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,.6); 
    float:right; 
    -webkit-shape-outside:circle(150px at 50% 50%) border-box; 
    shape-outside:circle(150px at 50% 50%) border-box; 
    -webkit-shape-margin:20px; 
    shape-margin:20px; 
    } 

Так есть ли способ, чтобы оттолкнуть ее от прокрутки контента?

Я предполагаю, что я пытаюсь сделать, чтобы прокрутка появлялась вне элемента, а не внутри.

UPDATE После ответа был применен: http://jsfiddle.net/c78e3/5/

Answer 1

Вы можете попробовать jQuery Scrollbar - Example на jsFiddle. Посмотрите расширенную демоверсию, чтобы посмотреть, как работает внешняя полоса прокрутки и как ее использовать в вашем случае.

jQuery(function($){ 
    $('div.two').scrollbar(); 
});