我的问题是粘性标头的宽度。它在右侧的垂直滚动条上水平延伸。因此,如果滚动条的拇指位于顶部和标题的下方,则无法抓住并拖动它。奇怪的是,拇指似乎位于标题的顶部,但是如果尝试抓住并拖动它,您将选择文本而不是移动滚动位置。
有没有一种方法可以固定此标题的宽度,使其足以覆盖滚动文本,但又不能覆盖滚动条,或者可以将滚动条放在标题上方?
https://codesandbox.io/s/fragrant-cookies-g9w4c
.App {
font-family: sans-serif;
text-align: center;
}
::-webkit-scrollbar {
width: 40px;
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 18px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 18px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
.sticky-heading {
background-color: aqua;
font-weight: bold;
font-size: 22px;
padding-top: 10px;
width: 100%;
position: fixed;
}
.list {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 20px;
position: fixed;
background: #fff;
height: 100vh;
width: -webkit-fill-available;
overflow-x: hidden;
}
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<div className="list">
<div>
<div>
<div className="sticky-heading">
This should not cover the scrollbar
</div>
<div>
{Array.from({ length: 300 }, () => {
return (
<div>
this must be covered by the heading when scrolling
<br />
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
::-webkit-scrollbar {
width: 40px;
}
给定的滚动条宽度是40px
&滚动条出现在页面的右侧,因此添加right:40px
:
.sticky-heading {
right: 40px; //or 30px whatever you want but more than scrollbar width
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句