Question

如何使用jquery在div内容中创建自己的滚动条。我只是为内容而做一个div在右侧的div中添加div。

我目前的代码：

var scrollheight = $("#demo").prop("srollHeight");
var scrollblock = '<div class="custom">'+'</div>';

$("#demo").append(scrollblock);

var scrollbar = '<div class="scrollbar">'+'</div>';

$(".custom").append(scrollbar);

#demo{
    height: 500px;
    width: 500px;
    margin: 30px auto;
    overflow: hidden;
    border: 1px solid black;
    background-color: lightgray;
    position: relative;
}

p{
    margin-left: 5px;
    margin-right: 15px;
}

.custom{
    height: 100%;
    width: 10px;
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #abaaa7;   
}

.scrollbar{
    height: 20px;
    width: 10px;
    background-color: darkorange;
    border-radius: 30%;
    border: 1px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo">
           <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue id elit dignissim pretium. Nulla ut metus diam. Vivamus mattis sodales massa eu viverra. Fusce elementum dui lacus, nec porttitor velit. Donec vehicula mollis tincidunt. Proin tellus tortor, egestas vel ultrices ullamcorper, accumsan sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id purus non justo porttitor pretium. Cras in ipsum dui, ut rutrum nibh. Donec gravida pellentesque fermentum. Nunc tincidunt gravida ligula at dictum. Integer eu orci nec arcu rhoncus facilisis aliquet id metus.

            Aliquam id tempus risus. Donec id odio id dui rutrum dictum. Donec mollis lacus a metus congue porta. Morbi tincidunt elit vel augue venenatis vestibulum. Quisque auctor orci at elit aliquet ullamcorper volutpat nunc feugiat. Phasellus commodo tristique quam, ac mattis odio scelerisque nec. Phasellus nec lobortis odio. Nunc risus mauris, sollicitudin bibendum porta ultricies, vehicula eu odio. Praesent non lorem diam. Nunc sit amet arcu justo, et venenatis magna. Etiam elementum ipsum eu dui interdum aliquet. Duis scelerisque congue venenatis. Quisque fringilla dui sed felis elementum placerat. Donec ultrices sodales eros viverra vulputate.

            Donec eu quam nunc, in pharetra libero. Etiam egestas, libero a molestie dapibus, elit neque lobortis nisl, interdum dictum mauris mauris quis enim. Proin porta, nulla et condimentum lobortis, risus lorem ultrices tortor, id cursus nulla libero et lacus. Pellentesque dapibus, erat non vehicula congue, neque est mollis risus, id ornare turpis leo eu eros. Suspendisse commodo elementum odio, in semper est malesuada nec. Praesent et tincidunt mi. Phasellus sodales felis nisl. Pellentesque sit amet arcu justo, auctor adipiscing mauris. Aenean aliquam consequat massa, vitae molestie neque gravida et. Phasellus vehicula euismod porta. Donec eget est enim. Cras mattis commodo sagittis. Vivamus at mauris eu tellus pulvinar pretium a sit amet diam. Pellentesque quis tortor libero. Phasellus eleifend, risus sit amet blandit ultrices, tellus ligula consequat libero, sit amet gravida nunc odio vel turpis. Vestibulum accumsan orci in velit ornare sed venenatis quam consequat.

            Vestibulum justo massa, varius vitae pellentesque in, mollis quis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vulputate erat nec purus lacinia at ultrices diam semper. Vivamus eget fermentum purus. Nam sit amet libero justo, congue accumsan dolor. Pellentesque imperdiet lobortis urna sed sollicitudin. Curabitur ac magna quis lacus commodo varius eu ac dui. Aliquam vel mauris tellus. Donec facilisis sem tempor turpis faucibus auctor. Proin tincidunt adipiscing nunc, et pellentesque metus iaculis eu.

            In convallis rutrum pretium. Praesent lobortis felis sed elit placerat sit amet suscipit enim rhoncus. Sed imperdiet pretium ullamcorper. Duis nec varius lacus. Nulla rutrum molestie tortor, a ornare sem tristique ac. Quisque rhoncus felis id augue viverra consectetur. Cras condimentum dapibus risus, eget condimentum mauris ultrices ac. Cras vel augue eros, vitae volutpat felis. Sed feugiat vulputate diam, vitae accumsan augue rhoncus non. Nullam non dolor diam.
           </p>
</div>

注意

我不想使用默认滚动条，也不想使用插件

Answer 1

在班级/（id）overflow: auto;

中使用overflow: hidden;代替demo

Answer 2

使用overflow:auto代替overflow:hidden。因为隐藏的不会滚动它们只是隐藏内容而你想要滚动使用溢出：自动或滚动css

#demo{
    height: 300px;
    width: 500px;
    margin: 30px auto;
    border: 1px solid black;
    background-color: lightgray;
    position: relative;
     overflow:auto;

}

Fiddle

Answer 3

尝试：

#demo{
    height: 500px;
    width: 500px;
    margin: 30px auto;
    overflow-y: scroll;
    border: 1px solid black;
    background-color: lightgray;
    position: relative;

}

这将为您的#demo div创建一个垂直滚动条。

Fiddle here

如何使用jquery在div中创建自定义滚动条

3 个答案: