Safari - Javascript - 隐藏/显示 Div 导致滚动条重置

发布于 2024-10-31 15:06:03 字数 642 浏览 5 评论 0原文

我有一个 HTML 文档，其中包含一系列问题和答案。

每个问题都包含在一个 div 中。每个答案都包含在一个 div 中。每个答案都有一个唯一的 ID。

每个答案的 CSS 样式设置为“none”，以便最初隐藏该元素。

单击问题时，div 会将相应答案的 id 传递给此函数：（

function toggle(id) {
    var state = document.getElementById(id).style.display;
    if (state == 'block') {
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById(id).style.display = 'block';
    }
}

这会切换答案 div 的外观。）

问题： 如果滚动条在 Safari 中运行良好，则此机制可以正常工作位于默认（顶部）位置。否则，这将导致滚动条重置为默认位置，从而有效地破坏了该机制在长页面上的有用性。

问有什么办法可以防止滚动条位置被重置吗？

谢谢。

原文

I have a HTML document containing a series of Questions and Answers.

Each Question is contained in a div. Each Answer is contained in a div. Each Answer is given a unique id.

The CSS style for each Answer is set to 'none' in order to initially hide the element.

When a Question is clicked on, the div passes the id of the corresponding Answer to this function:

function toggle(id) {
    var state = document.getElementById(id).style.display;
    if (state == 'block') {
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById(id).style.display = 'block';
    }
}

(This toggles the appearance of the Answer div.)

The problem: This mechanism works well in Safari if the scrollbar is at the default (top) position. Otherwise, this will cause the scrollbar to reset to the default position, effectively ruining the usefulness of this mechanism on long pages.

Q. Is there any way to prevent the scrollbar position from being reset?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世态炎凉 2024-11-07 15:06:03

您说过您正在使用

<a href='#'>...</a>

...来回答这个问题。这就是问题所在，这是一个告诉浏览器转到页面顶部的链接。您有几个选项可以纠正它：

挂钩链接（或其父链接等）上的click 事件并取消默认操作。如何做到这一点取决于您如何挂钩事件。听起来您已经挂钩该事件，所以这可能是最简单的解决方案。如果您使用 onclick= 样式挂钩，请从处理函数中 return false; 。如果您使用的是 addEventListener，请使用 preventDefault 位于传入的 event 上。（您可能已经知道，大多数版本的 IE 不支持 addEventListener，而是支持 attachEvent；防止默认的方式也不同。这种事情是为什么我使用像 jQuery、这样的库原型、YUI、关闭，或其他任何一个 > 以消除浏览器差异。）
使用 javascript: 伪协议而不是 #，例如：
```
...
```
伪协议告诉浏览器运行 href 元素中的脚本代码。上面的代码只是一个;（语句终止符），什么也不做。当然，您可以让它触发您的 toggle 功能：
```
...
```
根本不要使用a。使用一个是否合适取决于它在概念上是否真的是一个链接，这完全由您决定。

You've said that you're using

<a href='#'>...</a>

...for the question. That's the problem, that's a link telling the browser to go to the top of the page. You have a couple of options for correcting it:

Hook the click event on the link (or its parent, etc.) and cancel the default action. How you do that depends on how you hook the event. It sounds like you're already hooking the event, so this is probably the simplest solution. If you're using an onclick= style hook, return false; out of your handler function. If you're using addEventListener, use preventDefault on the event passed into it. (You will presumably already be aware that most versions of IE don't support addEventListener, but rather attachEvent; how you prevent the default is also different. This sort of thing is why I use a library like jQuery, Prototype, YUI, Closure, or any of several others to smooth over browser differences.)
Use the javascript: pseudo-protocol instead of #, e.g.:
```
<a href='javascript:;'>...</a>
```
The pseudo-protocol tells the browser to run the script code in the href element. In the above, the code is just a ; (statement terminator), which does nothing. You could, of course, have it trigger your toggle function:
```
<a href='javascript:toggle("foo");'>...</a>
```
Don't use an a at all. Whether it's appropriate to use one depends on whether it really is conceptually a link, which is totally your call.