当width = 100%时,标题在滚动条上延伸

和Cancro

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

有没有一种方法可以固定此标题的宽度,使其足以覆盖滚动文本,但又不能覆盖滚动条,或者可以将滚动条放在标题上方?

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);
里特什·坎德卡(Ritesh Khandekar)
::-webkit-scrollbar {
    width: 40px;
  }

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

标题在滚动时落后

来自分类Dev

如何在滚动条上修复标题

来自分类Dev

max-width of 100px vs width of 100px ,为什么 max-width 比 width 短?

来自分类Dev

Matplotlib每周条在width <1.0时太细,在width> = 1.0时太粗

来自分类Dev

标题顶部的jqGrid水平滚动条

来自分类Dev

更改滚动条的标题背景

来自分类Dev

如何阻止滚动条推入标题?

来自分类Dev

更改滚动条的标题背景

来自分类Dev

为gridview排除ItemStyle-Width的标题?

来自分类Dev

不滚动时滚动条褪色

来自分类Dev

在100%width div中向右填充

来自分类Dev

chrome bug display flex width 100

来自分类Dev

水平滚动条,宽度为100%

来自分类Dev

包装高度为100%的滚动条

来自分类Dev

滚动条高度显示为 100%

来自分类Dev

jQuery width()在加载时不正确

来自分类Dev

当设置'HorizontalAlignment =“ Stretch”'时,如何获取'Width'?

来自分类Dev

jQuery .width()在页面加载时关闭

来自分类Dev

如何从已定义位置开始逐步调整滚动条上的粘性标题的大小

来自分类Dev

CSS下拉菜单在悬停时将滚动条添加到标题div

来自分类Dev

width:auto和width:100%之间的差异-100%是多少?(CSS)

来自分类Dev

在Windows Phone上的元素内滚动时,如何使滚动条出现?

来自分类Dev

Android在滚动事件上更新内容时设置了scrollLeft不会更新滚动条位置

来自分类Dev

没有滚动位置时,如何在Microsoft Chrome上隐藏溢出滚动条?

来自分类Dev

即使焦点在其他对象上,也可以在滚动时更改滚动条的值

来自分类Dev

不在Android网页上滚动时的CSS自动隐藏滚动条

来自分类Dev

Bootstrap 4 列上的 100% 高度(浏览器上没有滚动条)

来自分类Dev

仅在子元素的width属性超过父元素的max-width属性时水平滚动

来自分类Dev

当绝对div已经具有100%的高度时,想要隐藏滚动条

Related 相关文章

  1. 1

    标题在滚动时落后

  2. 2

    如何在滚动条上修复标题

  3. 3

    max-width of 100px vs width of 100px ,为什么 max-width 比 width 短?

  4. 4

    Matplotlib每周条在width <1.0时太细,在width> = 1.0时太粗

  5. 5

    标题顶部的jqGrid水平滚动条

  6. 6

    更改滚动条的标题背景

  7. 7

    如何阻止滚动条推入标题?

  8. 8

    更改滚动条的标题背景

  9. 9

    为gridview排除ItemStyle-Width的标题?

  10. 10

    不滚动时滚动条褪色

  11. 11

    在100%width div中向右填充

  12. 12

    chrome bug display flex width 100

  13. 13

    水平滚动条,宽度为100%

  14. 14

    包装高度为100%的滚动条

  15. 15

    滚动条高度显示为 100%

  16. 16

    jQuery width()在加载时不正确

  17. 17

    当设置'HorizontalAlignment =“ Stretch”'时,如何获取'Width'?

  18. 18

    jQuery .width()在页面加载时关闭

  19. 19

    如何从已定义位置开始逐步调整滚动条上的粘性标题的大小

  20. 20

    CSS下拉菜单在悬停时将滚动条添加到标题div

  21. 21

    width:auto和width:100%之间的差异-100%是多少?(CSS)

  22. 22

    在Windows Phone上的元素内滚动时,如何使滚动条出现?

  23. 23

    Android在滚动事件上更新内容时设置了scrollLeft不会更新滚动条位置

  24. 24

    没有滚动位置时,如何在Microsoft Chrome上隐藏溢出滚动条?

  25. 25

    即使焦点在其他对象上,也可以在滚动时更改滚动条的值

  26. 26

    不在Android网页上滚动时的CSS自动隐藏滚动条

  27. 27

    Bootstrap 4 列上的 100% 高度(浏览器上没有滚动条)

  28. 28

    仅在子元素的width属性超过父元素的max-width属性时水平滚动

  29. 29

    当绝对div已经具有100%的高度时,想要隐藏滚动条

热门标签

归档