【发布时间】：2021-04-29 17:46:56
【问题描述】：
所以我正在学习 HTML 和 CSS，我制作了一个容器，在该容器中我有一个可滚动的 div，但滚动条是 div 的高度（看起来更像是 border-right 而不是滚动条） ， 这是为什么？ （别介意我的cmets，只是为了让我知道什么东西）
这是它的外观： here
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox funsies</title>
<link rel="stylesheet" href="./style.css">
</link>
<script src="./script.js"></script>
</head> <!-- I need to remember this;
the head is basically like importing modules and setting variables except this is HTML so we only set our meta(data) tags, import our script & css and also can set the title of our page !-->
<body>
<main>
<div class="container"> <!-- Here I made a container, containers are for... containing stuff, so if you make a div that's 50vh and 50vw, and then put something IN the div, it will be positioned in the div !-->
<div class="inContainer">
<div>Hello cruel world!</div>
<div>This is another div!</div>
<div>And could we do another one?</div>
<div class="scrollbarHere">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tellus. Nam quis nulla. Nullam sit amet magna in magna gravida vehicula. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Fusce wisi. Aenean fermentum risus id tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dapibus fermentum ipsum. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer tempor. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante.
Nullam sit amet magna in magna gravida vehicula. Nam quis nulla. Aliquam id dolor. Proin mattis lacinia justo. Fusce wisi. Nulla pulvinar eleifend sem. Suspendisse nisl. Duis pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Et harum quidem rerum facilis est et expedita distinctio.</div>
<div id="toChange">Flexbox is so awesome!</div>
</div>
<div class="inContainer2">
<div>Hey nice world!</div>
<button type="button" onclick="changeDivText()" class="basicButton">Click me!</button>
</div>
</div>
</main>
</body>
</html>
CSS
/* To change something by ID, use # ex.: #my2ndDiv
To change sonething by class, use . ex.: .container
To change something by the DOM, use its name ex.: button */
* { /* sets these things for every element */
font-family: "./Lekton-Bold.ttf", monospace; /* for some reason you have to pass in the type of the font? */
color: #A6ADB8; /* text color */
margin: 0; /* these two reset some stuff for other browsers i dont really know */
padding: 0;
box-sizing: border-box;
}
main {
min-height: 100vh; /* vh is view-height so basically what is visible on the screen :) */
display: flex; /* makes our main a flexbox so that we can have things aligned easily */
align-items: center; /* will not work without display: flex; */
justify-content: center; /* will not work without display: flex; */
text-align: center; /* will not work without display: flex; */
background-color: #050A12;
}
.container {
background: linear-gradient(
to bottom left,
rgba(185, 181, 199, 0.05), /* rgba stands for Red Green Blue Alpha, which means that the last number, from 0 to 1 is the alpha (opacity) of the color */
rgba(185, 181, 199, 0.12)
); /* linear gradient, you did gfx you know what that is. */
min-height: 80vh; /* sets the minimum height to 80 view-height */
min-width: 80vw; /* sets the minimum width to 80 view-width */
border-radius: 2rem; /* round things = better */
display: flex; /* covered on line 11 */
align-items: center; /* ^^^^ */
justify-content: center;
text-align: center;
}
.inContainer {
display: flex; /* line 11 */
flex: 1; /* we set our 'flex' to be 1 so that means if something next to it has 'flex' 2 then the width of this container will be 33% and the other thing next to it would have 66%, just get me... */
flex-direction: column; /* makes it so that stuff inside the container is displayed vertically instead of horizontally */
min-width: 30vw;
min-height: 80vh; /* ^^ blablabla talked about it before */
align-items: center;
justify-content: space-evenly; /* speaks for itself */
text-align: center;
background: linear-gradient(
to right bottom,
rgba(185, 181, 199, 0.1),
rgba(185, 181, 199, 0.2)
);
border-radius: 2rem;
box-shadow: 16px 0 12px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.15); /* makes a shadow just on the right side of the container */
}
.inContainer2 {
display: flex;
flex: 1.5;
flex-direction: column;
min-width: 30vw;
min-height: 80vh;
align-items: center;
justify-content: space-evenly;
text-align: center;
}
.basicButton {
font-size: 125%; /* here i have set the font size of the button text to 125%, 100% is the default size, by increasing font size, button size also increases */
border-radius: 0.25rem;
border-style: none; /* i remove the ugly default style it gives it */
padding-top: 5px; /* makes a 5px space between text of the button and the top of the button */
padding-bottom: 5px; /* makes a 5px space between text of the button and the bottom of the button */
padding-left: 5px; /* makes a 5px space between text of the button and the left side of the button */
padding-right: 5px; /* makes a 5px space between text of the button and the right side of the button */
background: linear-gradient(
to right bottom,
rgba(185, 181, 199, 0.1),
rgba(185, 181, 199, 0.3)
);
box-shadow: 16px 0 12px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.15);
}
.scrollbarHere {
min-height: 20vh;
max-height: 20vh;
min-width: 20vw;
max-width: 20vw;
overflow-y: scroll;
word-break: break-all;
}
::-webkit-scrollbar {
background-color: red; /* This is just so I know where the scrollbar is */
}
【问题讨论】：
-
哦，是的，抱歉，没注意到
-
您的滚动条和内容之间没有空格，这就是为什么它看起来像一个边框。如果需要，您可以减小滚动条宽度
-
我的意思是，如果我滚动，滚动条不会移动，它保持不变，这不是滚动条的作用
-
它确实移动了，但它不可见，因为您将滚动条颜色设置为红色。检查jsfiddle
-
哦我明白了，那我怎么设置它的颜色呢？
标签： html css web scroll scrollbar