css-定位滚动条，为包含的元素提供空间（外部，而不是内部）

我只是在玩一些css，创建了一个滚动的元素，并显示为“舷窗”类型的视图。然而，滚动条覆盖了元素的一部分

我尝试了填充，边距和包装在另一个分区，但不能完全得到我所希望的结果。我还尝试对包装div应用相同的边界半径和尺寸，并对其应用填充，但是内容超出了内部div

这将使问题更加清楚：

当前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;
    }

那么有没有办法把它从可滚动的内容中推出来呢

我想我要做的是让滚动条出现在元素外部而不是内部

更新 应用答案后：

您可以在JSFIDLE上尝试。查看高级演示，了解外部滚动条是如何工作的，以及如何在您的案例中使用它

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

---

非常感谢你。这帮了大忙。最终结果：