【问题标题】:Modify scroll direction修改滚动方向
【发布时间】:2011-12-16 06:40:12
【问题描述】:

所以基本上,我正在创建一个分为两列的网站。这些列位于浏览器的整个高度,并分别占满屏幕的 50%。基本示例:

 -------------
|      |      |
|  up  | down |
|      |      |
 -------------

这是我设计的。每列都是一个 div 并且都垂直滚动。我想要的是能够滚动任一 div 并且右侧的滚动方向与左侧的滚动方向相反;但它们同时滚动。

我还想要一个右侧的滚动条(就像一个普通的垂直网站),但是当你滚动它时,一侧会向上,另一侧会向下。

有人可以在这里提供帮助吗?或者给我指明一个特定的方向?

示例: http://buero-buero.org/

【问题讨论】:

  • 你检查过视差滚动吗?

标签: javascript html css scroll


【解决方案1】:

被你链接的页面无耻地盗用了,很琐碎:

<script>
function crisscross() {
$('down-left').style.bottom = '-' + window.scrollY + 'px';
$('down-right').style.bottom = '-' + window.scrollY + 'px';
$('left').style.left = '-' + window.scrollY + 'px';
$('right').style.right = '-' + window.scrollY + 'px';
}
</script> 

编辑:

回答您的评论:

A) window.scrollY 是页面的垂直滚动量,您只需绝对定位您的 #down div 与反向绝对位置。如果您不理解它,您至少应该弄乱它一段时间以理解它,或者更好地了解window.scrollY 和jquery $().style 的工作原理。

B) 这不是你可以将功劳归于的代码数量......这不是窃取,而是根本不是重新发明轮子。

C) 不明白这一点,抱歉,#down-right 是您在问题中提出的问题:div 在滚动条的相反方向滚动。

再次编辑:

别忘了也看看 css:

div#down-right {
    bottom: 0;
    position: fixed;
    right: 6%;
}

【讨论】:

  • 哈哈。是的,我在他们的网站上看到了,但是:A)不明白。谁能解释一下? B)不想偷它。 C)此外,如果您向下滚动到 HTML,则还有其他元素。例如“左上”。
  • 我还没回答 ;)
猜你喜欢
  • 1970-01-01
  • 2015-06-04
  • 1970-01-01
  • 2013-09-30
  • 2018-12-16
  • 2021-02-26
  • 2014-02-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多