当宽度=100%时，标题在滚动条上延伸

Question

我的问题是粘性标头的宽度。它在右侧的垂直滚动条上水平延伸。因此，如果滚动条的拇指在标题的顶部和下方，那么你就无法抓取和拖动它。奇怪的是，拇指似乎在标题的上方，但如果你试图抓取和拖动，你将选择文本，而不是移动滚动位置。

有没有办法固定这个标题的宽度，使其足够宽，可以覆盖滚动文本，但不能覆盖滚动条，或者将滚动条放在标题的顶部？

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);

Answer 1

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

给定滚动条的宽度为40px&滚动条出现在页面右侧，因此在中添加right:40px

.sticky-heading {
right: 40px; //or 30px whatever you want but more than scrollbar width 
}

Answer 2

您可以尝试使用此position: absolute;而不是position: fixed;

.sticky-heading {
background-color: aqua;
font-weight: bold;
font-size: 22px;
padding-top: 10px;
width: 100%;
position: absolute;
}

这是你想要的吗？