javascript - 如何在不使用 JavaScript 的情况下使浏览器将元素水平滚动到预定义位置?

标签 javascript css dom xhtml cross-browser

我正在开发“时间轴”元素,其中列表项内有内容,位于水平无序列表中。它包含在 div 中,因此您可以从左向右滚动内容。

我的客户想要“转到”每个时代的按钮。我知道这可以通过 JavaScript 轻松实现。然而他们也希望在没有 JavaScript 的情况下也能正常工作。我尝试为每个元素添加 anchor ,但这并没有真正起作用,因为您无法控制浏览器想要最终到达的确切位置。使用带有水平滚动的 anchor 是非常有问题的。

有什么想法吗?

最佳答案

当 JavaScript 不可用时,使用垂直时间线(整个页面滚动,无内部滚动条)。 anchor 在这种情况下效果相当好。实现此目的的一个简单方法是使折叠列表及其包含的 div 的样式依赖于 DOM 层次结构中较高的类,并在加载时 使用 JavaScript。比如,

.jsEnabled .containingDiv { height: 10em; overflow: auto; } 
.jsEnabled .timelineList li { width: 6em; float: left; }

...

function loadTimeStuff()
{
  // enable styles that require JS-assisted scrolling
  document.body.className = "jsEnabled"; 
  // ...
}

当然,它看起来不会像成熟的 JS 增强页面那么奇特,但它是一个后备 - 如果用户想要奇特的东西,他们只需要使用支持 JavaScript 的浏览器...

关于javascript - 如何在不使用 JavaScript 的情况下使浏览器将元素水平滚动到预定义位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1971786/

相关文章:

javascript - 如何使用 "this"从所选项目中检索 id

javascript - CouchDB 自动归档

html - 如何调整内联 block 布局中元素之间的空间?

html - 如何选择表中的所有第一个 td

html - 仅使用 CSS 从 HTML 属性获取特定值

javascript - 如何从 JavaScript 检测 HTTP 状态

javascript - lazyload images - 在搜索引擎中索引图像

javascript/Ajax 执行onload一个div

javascript - 选中复选框时添加类并更改内部 HTML

javascript - 我可以从回调中获取 addEventListener() 注册的元素吗?