丰富:popupPanel隐藏重置滚动条
我有一个类似日历的视图，有一个垂直滚动条。只要单击一个位置，我就会显示一个popupPanel，可以在其中输入日历条目的数据。一旦调用popupPanel的hide()，主视图的滚动条就会重置到顶部。为什么？
我现在在打开popupPanel之前存储scrollTop，并在关闭后恢复它，但这并不美观，因为滚动条以这种方式闪烁。
有没有人对为什么通过隐藏popupPanel来触摸滚动条位置有什么建议？
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:c="http://java.sun.com/jsp/jstl/core"
>
<h:head>
</h:head>
<h:body>
<a4j:log id="log" level="INFO" mode="popup" hotkey="M"/> <!-- Ctrl+Shift+M -->
<h:form id="formId">
Click anywhere in the div to show the popup...
<rich:popupPanel id="popupTest" width="200" height="150" modal="true">
<f:facet name="header">
Popup panel test
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popupTest')}.hide(); return false;">X</h:outputLink>
</f:facet>
And here some text...<br/>
<a href="#" onclick="#{rich:component('popupTest')}.hide(); return false;">Hide popup 1</a><br/>
<h:outputLink value="#" onclick="#{rich:component('popupTest')}.hide(); return false;">Hide popup 2</h:outputLink><br/>
<a href="#" onclick="console.log('click...');">Console message</a><br/>
</rich:popupPanel>
<div style="height:2000px; width:100px; border:1px solid green; background:grey;" onclick="#{rich:component('popupTest')}.show()"/>
</h:form>
</h:body>
</html>
浏览器处理的任何事件似乎都会重置滚动条。与richfaces没有太多关系...但是如何处理事件，包括在弹出窗口中提交值，并且仍然不重置滚动条。将'return false‘添加到onclick是不可能的...
谢谢，Milo van der Zee
Richfaces-4.1，MyFaces-2.1.6
回答 1
Stack Overflow用户
发布于 2012-03-22 01:56:41
这是一件奇怪的事情(至少对我来说是这样)。popupPanel未包含在与带有滚动条的内容相同的div中。奇怪的是，弹出窗口一关闭，滚动条就会被重置。
当我添加一个包含绝对位置的div时(左、右、上、下都设置为0)，另一个div的滚动条保持不变:)
我可以想到，弹出窗口创建了一个div，然后再次将其删除。可能是浏览器被迫渲染不需要渲染的屏幕部分。只是猜测..。
麦格，麦洛
https://stackoverflow.com/questions/9791116
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号