Question

在我的页面中，我有一个包含大量文本的div。我想使用overflow-y属性的滚动值。但是，正如我想要设置样式一样，滚动条不会随半径变换。以下是jsfiddle：

和代码：

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget
        turpis nisi. Sed pellentesque urna a fringilla feugiat. Vivamus consequat
        vitae risus nec congue. Nulla faucibus hendrerit velit vitae euismod.
        Pellentesque efficitur efficitur aliquet. Vivamus ut nunc mi. Fusce 
        aliquam quam sit amet malesuada lacinia.

        Aenean vulputate sagittis porta. Nullam vehicula tellus a erat malesuada gravida.
        Vestibulum vulputate eros consectetur ipsum luctus fermentum. Cras consequat
        sollicitudin elit, sed tempor nulla gravida ac. Donec in porttitor ipsum. Sed
        a nisi nec massa euismod tincidunt sed vitae justo. Phasellus a nunc commodo,
        imperdiet nulla vitae, sollicitudin mi. Pellentesque aliquet faucibus sapien et
        congue. In vel diam vitae orci interdum sollicitudin. In a tristique libero,
        vitae finibus metus. Aliquam porttitor justo sed iaculis cursus.

        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
        cubilia Curae; Mauris massa arcu, pellentesque eu libero vitae, volutpat
        eleifend eros. Quisque ut ultrices dui. Mauris quis
    </div>

CSS

div {
        height: 300px;
        width: 400px;
        border: 2px solid black;
        overflow-y: scroll;
        border-radius: 7%;
    }

无论如何使用CSS3修复此问题？或者我是否必须使用JS / jQuery来修复它？

Answer 1

试试这个：

＆＃13;

.wrapper {
  padding: 15px;
  border: 2px solid black;
  height: 300px;
	width: 400px;
  border-radius: 7%;
}
.wrapper div {
		height: 300px;
		width: 400px;
    overflow-y: scroll;
    padding-right: 10px;
	}

＆＃13;

<div class="wrapper"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget
		turpis nisi. Sed pellentesque urna a fringilla feugiat. Vivamus consequat
		vitae risus nec congue. Nulla faucibus hendrerit velit vitae euismod.
		Pellentesque efficitur efficitur aliquet. Vivamus ut nunc mi. Fusce 
		aliquam quam sit amet malesuada lacinia.

		Aenean vulputate sagittis porta. Nullam vehicula tellus a erat malesuada gravida.
		Vestibulum vulputate eros consectetur ipsum luctus fermentum. Cras consequat
		sollicitudin elit, sed tempor nulla gravida ac. Donec in porttitor ipsum. Sed
		a nisi nec massa euismod tincidunt sed vitae justo. Phasellus a nunc commodo,
		imperdiet nulla vitae, sollicitudin mi. Pellentesque aliquet faucibus sapien et
		congue. In vel diam vitae orci interdum sollicitudin. In a tristique libero,
		vitae finibus metus. Aliquam porttitor justo sed iaculis cursus.

		Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
		cubilia Curae; Mauris massa arcu, pellentesque eu libero vitae, volutpat
		eleifend eros. Quisque ut ultrices dui. Mauris quis
    </div></div>

＆＃13;

Answer 2

使用以下CSS（:: - webkit-scrollbar-xxx）设置滚动条的样式，或应用此＆＃34;侧栏＆＃34;你的div的课程。

.sidebar::-webkit-scrollbar{
    width:5px;
    background-color:#303949;
}

.sidebar::-webkit-scrollbar-thumb{
    background-color:#cccccc;
}
.sidebar::-webkit-scrollbar-thumb:hover{
    background-color:#cccccc;
}

.sidebar::-webkit-scrollbar-thumb:active{
    background-color:#cccccc;
} 

.sidebar::-webkit-scrollbar-track{
    border:1px #303949 solid;
    -webkit-box-shadow:0 0 5px 303949 inset;
}

滚动不会随着溢出y滚动和边框半径而改变

2 个答案: