html - overflow-y 改变文字颜色
问题描述
我正在学习 HTML 和 CSS,我有以下问题,我有一个很长的项目列表,我正在使用外部 CSS 应用溢出。问题是它改变了列表的字体颜色。我还将感谢有关如何设置滚动条样式并且仅在滚动时可见的任何信息。
#main-div {
position: relative;
}
#container-div {
position: absolute;
right: 0;
margin-top: 15%;
margin-right: 10%;
overflow-y: auto;
width: 600px;
height: 350px;
}
.main-text {
color: aliceblue;
mix-blend-mode: difference;
}
<div id="main-div">
<div id="container-div">
<div id="list" class="main-text">
<h4>title 1</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 2</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 3</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 4</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 5</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 6</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
解决方案
我没有看到字体颜色发生变化。但是要设置滚动条的样式,请检查下面的 css 片段。
#main-div {
position: relative;
}
#container-div {
position: absolute;
right: 0;
margin: 10%;
overflow-y: auto;
width: 600px;
height: 300px;
background: lightblue;
}
/* Styling Scroll Bar */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #c1c1c1;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div id="main-div">
<div id="container-div">
<div id="list">
<h4>title 1</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 2</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 3</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 4</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 5</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 6</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
推荐阅读
- firebase - URL 中的 Firebase 托管路径参数不起作用
- visual-c++ - MSVC2017 编译器错误,Chromium 构建失败
- perl - 用 Perl 阅读和解释 crontab
- c# - 更新 HttpWebRequest 中的 api 时出现错误请求
- ionic-framework - 使用 Ionic core 4 时不会显示 ion-content
- apache2 - apache2 virtual 无法正常工作,重定向到 000-default.conf 位置
- regular-language - 如何显示常规语言等于另一种语言?
- html - 如何在我的容器中对齐引导导航栏
- php - 如何使用php替换文件中的字符串
- demandware - 我们如何从 SFCC(需求软件)获取最后访问的管道。