gpt4 book ai didi

javascript - 显示时如何确保 HTML 元素在屏幕中?

转载 作者:行者123 更新时间:2023-11-28 05:25:45 24 4
gpt4 key购买 nike

这是我的 HTML 结构:

<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class='error'>error message</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>

这是我的 CSS 代码:

.error{
display: none;
}

这是我的 Jquery 代码:

// detect pressing enter on keyboard
$(document).keypress(function(e) {
if(e.which == 13) {
$('.error').show();
}
});

以上代码的作用:当用户按下 <enter> 时, <div>将显示。

我想要什么:<div>显示,如果它在屏幕中则什么都没有,但如果它不在屏幕中,页面滚动并停止在 <div> 处。在屏幕上,我该怎么做?

请注意,我不想要这个: position: fixed;

最佳答案

创建 fiddle

稍微修改了你的JS,请看一下

$(document).keypress(function(e) {
if(e.which == 13) {
$('.error').show();
$('.error')[0].scrollIntoView(true);
}

});

关于javascript - 显示时如何确保 HTML 元素在屏幕中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32757738/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com