javascript - 同时向下滚动一个 div 和向上滚动一个?

标签 javascript jquery html css scroll

我创建了一个网站,该网站垂直分为两栏(每栏占屏幕的一半)。如果我向下滚动,将光标放在网站上的任何位置,左栏应该表现正常并向下滚动,同时右栏应该朝相反的方向向上滚动。

我遇到了这个问题 – Modify scroll direction – 并试图从中找到解决方案,但我无法让它发挥作用。

这是我试过的:http://jsbin.com/UJEBohu/1/edit

最佳答案

我在这里制定了一个可行的解决方案:http://jsfiddle.net/QDUyR/1/

将此放入您的 <body> onload 事件,你应该被设置 :)

// Add event listener for scrolling
$("#left").on("scroll", function () {
    var scrolledleft = parseInt($("#left").scrollTop()) * -1;
    console.log(scrolledleft + scrolledright)
    $("#right").scrollTop(scrolledleft + scrolledright)
})

//Move right column to bottom initially
$("#right").scrollTop($("#right").height())
//Get actual distance scrolled
var scrolledright = parseInt($("#right").scrollTop())

编辑:更新后无论 div 的高度如何,只要它们相等即可。

关于javascript - 同时向下滚动一个 div 和向上滚动一个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19667687/

相关文章:

javascript - 按下按钮时写入 Ajax 返回的数据

javascript - 循环中的 React 渲染在第一个元素之后停止

javascript - 尝试让自动完成列表出现在图表顶部

jquery - 使 Bootstrap 面板具有相同的高度

html - 单击另一个 div 时显示无父 div,纯 css 可能吗?

javascript - 无法在 Chrome 扩展的内容脚本中将 <img> 附加到 <span>

javascript - 在 Chrome 的 F12 控制台中创建上下文菜单?

php - 使用 PHP、AJAX 和 MySQL 检查更新的最快方法

jquery - 使用 jquery 更改 html 标签的背景

html - 我的页面在 Safari 浏览器中被截断