【问题标题】:Tweaking scrollbar调整滚动条
【发布时间】:2014-08-24 19:55:56
【问题描述】:

是否可以通过编程方式更改滚动条的属性?假设我有一个长表,其中行延迟加载,我想使用垂直滚动条模拟“分页”。

已知数据集中的有限行数和当前位置,基于此我可以更改滚动条范围和缩略图高度吗?假设它一次只显示 100 行,但数据集中的实际行数是 10000,我可以让滚动条看起来像表格有 10000 个元素吗?

基本上我想控制滚动条的拇指高度和位置。可能,不是吗?

我想我可以隐藏滚动条并构建自己的input type="range" 并将其垂直放置,但我很好奇是否可以直接调整滚动条?

【问题讨论】:

    标签: javascript css html shadow-dom


    【解决方案1】:

    从今天开始,我认为这是不可能的。 (2014 年 10 月 8 日)

    如果您使用最新的稳定版 chrome (37),检查工具不会显示任何滚动条的影子根。我们可以用它来证明它是不可编辑的,因为大多数元素现在都已实现并且可以通过阴影 dom 进行自定义,可以看到有阴影。

    this gives an example of styling the video player. 示例链接显示他们实际设置了 input type="range" 元素的样式。 (如果有任何用处)

    这可能有两个原因。

    1 滚动条实现及其外观取决于操作系统。

    windows 上的滚动条与 mac 上的滚动条大小不同。

    2 滚动条用户交互也取决于设备类型。

    例如,在 macbook pro 笔记本电脑上,插入鼠标后滚动条会有所不同。 Android 甚至根本不显示滚动条,除非在主动滚动时。

    tl;博士 截至目前,滚动条世界过于分散,原生滚动条无法通过 html 设置样式。

    【讨论】:

      【解决方案2】:

      您可以使用Mousewheel jQuery plugin,但它仅在用户使用滚轮时才有效。

      我认为无法通过拖动滚动条来禁止用户手动滚动。

      不过,您可以通过将 overflow:hidden 设置为 body 来完全隐藏滚动条。

      【讨论】:

      • 我不是在问如何拦截来自滚动条的事件,或者如何隐藏它。我在问如何更改其拇指轨迹的大小和拇指的位置。视觉上使其更长或更短,不取决于容器的实际高度,而只是任意大小。例如:实际容器高度可能是 2000 像素,我希望滚动条表现得像容器高 6000 像素。
      • 顺便说一句。使overflow:hidden 使内容完全不可滚动。这不是我真正想要的
      • 也醒醒 - 它的 21 世纪。连我 70 岁的婆婆都不会用 jQuery 插件来解决她的问题
      猜你喜欢
      • 1970-01-01
      • 2019-04-07
      • 2012-05-20
      • 2018-05-11
      • 1970-01-01
      • 2018-08-23
      • 2011-01-03
      • 1970-01-01
      • 2011-02-03
      相关资源
      最近更新 更多