垂直滚动条不能工作，它处于活动状态。
垂直滚动条不能工作，它处于活动状态。
提问于 2020-05-04 17:06:56
垂直滚动条已变得不活动。这段代码的奇怪之处在于，它在我复制它的地方运行得很好，但对我来说，滚动条是存在的，但它是不可点击的(更像是透明的)。我可以用箭头键移动它，但不能用鼠标移动。为何会这样呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/a54d2cbf95.js"></script>
<link rel="stylesheet" href="style.css">
<title>Back To Top</title>
</head>
<style>
* {
margin:0;
padding:0;
}
html body {
scroll-behavior: smooth;
overflow-y: auto;
}
section {
height:75vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 8px;
}
.section1 {
background: #f0932b;
}
.section2 {
background: #eb4d4b;
}
.section3 {
background: #7ed6df;
}
.section4 {
background: #22a6b3;
}
.to-top {
background: white;
position: fixed;
bottom: 16px;
right:32px;
width:50px;
height:50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:32px;
color:#1f1f1f;
text-decoration: none;
opacity:0;
pointer-events: none;
transition: all .4s;
}
.to-top.active {
bottom:32px;
pointer-events: auto;
opacity:1;
}
</style>
<body>
<section class="section1">Section 1</section>
<section class="section2">Section 2</section>
<section class="section3">Section 3</section>
<section class="section4">Section 4</section>
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
<script >
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})
</script>
</body>
</html>
使滚动条活动是我的主要问题。实际上，我正在尝试更改滚动条的样式。
如果你能修改我的代码我会非常感激的。我只想用鼠标滚动。
我试过几件事，但没什么用。
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-05-04 17:13:14
下面给出的不是试图固定当前代码，而是尝试创建一个新的滚动bar..scroll条形码。
只需复制过去，自定义它并享受
/**************** scroll bar *******************/
::-webkit-scrollbar{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
border-radius: 10px;
/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
background-image: -webkit-linear-gradient(160deg, rgb(68, 67, 67),rgb(129, 127, 127), rgb(68, 67, 67));
}
/**************** /scroll bar ********************/
Stack Overflow用户
发布于 2020-05-04 17:20:03
我认为这是因为overflow-y: auto;，它应该是滚动或visible
Stack Overflow用户
发布于 2020-05-04 17:30:22
箭头图标问题与您的方框工具包。您可以查看这一点，否则您可以使用fontawesome。我为滚动条添加了一些css，现在它将非常好地工作。
const toTop = document.querySelector(".to-top");
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})* {
margin:0;
padding:0;
}
html body {
scroll-behavior: smooth;
overflow-y: auto;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
section {
height:75vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Raleway", sans-serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 8px;
}
.section1 {
background: #f0932b;
}
.section2 {
background: #eb4d4b;
}
.section3 {
background: #7ed6df;
}
.section4 {
background: #22a6b3;
}
.to-top {
background: white;
position: fixed;
bottom: 16px;
right:32px;
width:50px;
height:50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:32px;
color:#1f1f1f;
text-decoration: none;
opacity:0;
pointer-events: none;
transition: all .4s;
}
.to-top.active {
bottom:32px;
pointer-events: auto;
opacity:1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<title>Document</title>
</head>
<body>
<section class="section1">Section 1</section>
<section class="section2">Section 2</section>
<section class="section3">Section 3</section>
<section class="section4">Section 4</section>
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61597751
复制相关文章
相似问题
腾讯云开发者
