首页 > 其他分享 >高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置

高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置

时间:2022-12-22 13:04:58浏览次数:46  
标签:控件 浏览器 nearest light 156 high 253 高亮 sg


<style>
/*高亮提示________________________*/
[sg-high-light] {
animation: sg-high-light 1s ease 3;
}

@keyframes sg-high-light {
0% {
background: rgba(3, 156, 253, 0);
}
50% {
background: rgba(3, 156, 253, 0.2);
}
100% {
background: rgba(3, 156, 253, 0);
}
}
</style>
<script>
/**聚焦焦点*/
var focusDOM = {
__hl(s) {
s.setAttribute("sg-high-light", true);
setTimeout(function () {
s.removeAttribute("sg-high-light");
}, 3000);
},
to(s, is) {
typeof s == "string" && (s = document.querySelector(s));
is ? (typeof is == "string" && (is = document.querySelector(is))) : (is = s);
is.focus();
["input", "textarea"].includes(is.tagName.toLowerCase()) && is.select();
s.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});//缓慢滚动
is.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});//缓慢滚动
this.__hl(s);
}
};
</script>

标签:控件,浏览器,nearest,light,156,high,253,高亮,sg
From: https://blog.51cto.com/u_15920212/5962655

相关文章