滚动到素数对话框内

scrollTo inside a primefaces dialog

本文关键字:对话框 滚动      更新时间:2023-09-26

我正在寻找一种将素数对话框的滚动条滚动到顶部的方法。

用例:我在对话框中有一个表单,提交表单时有一些输入验证。如果在其中一个输入字段上检测到错误,则应在具有滚动条的对话框顶部显示一条消息。

Java实际代码没有影响(对保证没有错误):modifierUrgenceDelaiForm:exception 是 p:messages 组件的客户端 IDRequestContext.getCurrentInstance().scrollTo("modifierUrgenceDelaiForm:exception");

感谢您的帮助。

试着把它放在你的提交按钮上:

<p:commandButton value="Submit" .... 
   oncomplete="if (args.validationFailed) {PF('dialogwv').content.scrollTop('0')}" />
var elm = $("#formId'':componentId");
smoothScroll(elm); 

将以下代码放在某个 js 文件中,并传递验证无法滚动到该组件的组件的 id。如果您希望每次验证失败时滚动都会向上滚动,请传递对话框顶部某个组件的 ID。

请注意,这是客户端。因此,当您在浏览器中检查元素时,您需要传递出现在浏览器中的 Id。

希望这对您有所帮助。

function smoothScroll(elm) {
    var startY = currentYPosition();
    var stopY = elmYPosition(elm);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        scrollTo(0, stopY); return;
    }
    var speed = Math.round(distance / 100);
    speed=speed+12;
   if (speed >= 20) speed = 20;
    var step = Math.round(distance / 50);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
        for ( var i=startY; i<stopY; i+=step ) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY += step; if (leapY > stopY) leapY = stopY; timer++;
        } return;
    }
    for ( var i=startY; i>stopY; i-=step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
    }
}