【问题标题】:Setting scroll step/jump/snap distance with html/css使用 html/css 设置滚动步长/跳跃/捕捉距离
【发布时间】:2012-02-14 01:38:57
【问题描述】:

我发誓我以前做过,但也许是在标准之前的糟糕时代。现在我什至无法找出关键字来找到可能的解决方法。

所以我有一个位于包装器中的表,因此 x-overflow 位于包装器内,而不是扩展窗口。假设每一列都用css硬设置为150px。我希望它在水平滚动包装器时,滚动条“跳跃”150 像素,以便下一列的右边缘与包装器的左边距对齐。换句话说,您按列滚动,而不是按像素滚动,因此视口的左侧永远不会是部分列。

通过扩展,如果这可以是可变宽度跳跃,那么列不会被强制为统一宽度,那将是理想的,并且我希望这个以及以上所有内容都用于垂直滚动.

我认为这是一个标准但被忽视的 css 选项,或者至少是一个已弃用的 html 样式属性,但就像我说的,现在我什至在谷歌搜索他们想到的关键字时都找不到这个想法/概念。

感谢任何帮助(即使是让我入门的有点骇人听闻的帮助)。

【问题讨论】:

  • 我认为我缺少的关键字是“步长”,但所有结果似乎都是特定于移动设备或鼠标滚轮的......
  • 我真的不记得这样的属性,但你绝对可以用一点 Javascript 来创建功能。如果你想让它以可变宽度跳跃,你绝对应该走那条路。
  • 我绝对不会有使用(好的)javascript 来实现这种效果的问题,但我总是更喜欢依靠 js 的样式来微调 css,而不是依靠它来处理整体效果。也就是说,尽量通过cs​​s,用js把数字弄对。但这是一个偏好和个人指导方针,而不是规则。我觉得完全用 js 创建这样的效果不仅会导致浏览器/编程失败,还会阻碍 css 创新/采用。但我离题了。目前仍在寻找任何解决方案。
  • 另一个关键字可能是“snap to”,但同样,所有示例似乎都与触摸屏相关。不过,我希望越来越近。

标签: html css scroll


【解决方案1】:

这不完全是 CSS,但您可以使用 DOM 属性 scrollLeft(如果需要,也可以使用 scrollTop)。

有关更多信息和一些示例,您可以参考this page

【讨论】:

    猜你喜欢
    • 2020-08-26
    • 1970-01-01
    • 1970-01-01
    • 2019-10-15
    • 2019-07-14
    • 1970-01-01
    • 2019-11-08
    • 2015-12-23
    • 2021-12-29
    相关资源
    最近更新 更多