如何在一个页面上有两个不同的自定义滚动条？

时间：2016-04-18 15:31:59

标签： html css css-selectors

所以我想要的是可滚动div的不同滚动条和整个窗口的不同滚动条。这是我试过的，但我还没有能够得到两种不同颜色的滚动条。

＆＃13;
＆＃13; 
*{
	margin: 0;
	padding: 0;
	font-family: 'segoe ui light';
}
header{
	width: 100%;
	height: 300px;
	background: #efefef;
}
.container{
	width: 90%;
	margin: auto;
}
h1{
	padding: 20px 0;
	font-size: 45px;
	font-family: 'segoe ui light';
	text-align: center;
}
h2{
	font-size: 35px;
	padding: 10px 0 20px 20px;
}
figure{
	top: 0;
	width: 400px;
	height: 500px;
	padding: 0px 0px 0px 125px;
}
img{
	width: 100%;
	height: 100%;
}
.section{
	padding: 50px 0;
	height: 500px;
	-webkit-column-count: 2;
	-webkit-column-gap:20px;
}
.intro{
	font-weight: 1000;
}
.content{
	max-height: 250px;
	overflow-y: scroll;
	overflow-x:hidden;
}

/******************SCROLL BAR***********************/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    opacity: 0;
    background-color: #d2edda;
    //-border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #0b602f;
}

::selection {
    color: white;
    background: #13DA69;
}
＆＃13; 
<html>
	<head>
		<link rel="stylesheet" href="..//css/interview.css">
	</head>
	<body>
	<header></header>
	<div class="container">
		<h1>INTERVIEW</h1>
		<div class="section one">
			<h2>Name</h2>
			<div class="intro">
			<b>	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
			</div>
			<br>
			<br>
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
			</div>
			<figure>
				<img src="" alt="insert img here">
			</figure>
		</div>
		
	</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

因此需要div的不同滚动条和窗口的不同滚动条。

1 个答案:

答案 0 :(得分：2)

就像使用任何CSS选择器一样，您只需要通过在选择器中指定它来将各种::-webkit-scrollbar伪元素应用于div元素：

/* This styles any scrollbar. */
::-webkit-scrollbar {
  ...
}

/* This styles any scrollbar which is part of a `div` element. */
div::-webkit-scrollbar {
  ...
}

＆＃13;
＆＃13; 
*{
	margin: 0;
	padding: 0;
	font-family: 'segoe ui light';
}
header{
	width: 100%;
	height: 300px;
	background: #efefef;
}
.container{
	width: 90%;
	margin: auto;
}
h1{
	padding: 20px 0;
	font-size: 45px;
	font-family: 'segoe ui light';
	text-align: center;
}
h2{
	font-size: 35px;
	padding: 10px 0 20px 20px;
}
figure{
	top: 0;
	width: 400px;
	height: 500px;
	padding: 0px 0px 0px 125px;
}
img{
	width: 100%;
	height: 100%;
}
.section{
	padding: 50px 0;
	height: 500px;
	-webkit-column-count: 2;
	-webkit-column-gap:20px;
}
.intro{
	font-weight: 1000;
}
.content{
	max-height: 250px;
	overflow-y: scroll;
	overflow-x:hidden;
}

/******************SCROLL BAR***********************/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    opacity: 0;
    background-color: #d2edda;
    //-border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #0b602f;
}

div::-webkit-scrollbar-track {
    background-color: red;
}

div::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    background: purple;
}

::selection {
    color: white;
    background: #13DA69;
}
＆＃13; 
<html>
	<head>
		<link rel="stylesheet" href="..//css/interview.css">
	</head>
	<body>
	<header></header>
	<div class="container">
		<h1>INTERVIEW</h1>
		<div class="section one">
			<h2>Name</h2>
			<div class="intro">
			<b>	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
			</div>
			<br>
			<br>
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
			</div>
			<figure>
				<img src="" alt="insert img here">
			</figure>
		</div>
		
	</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题