html鼠标经过滚动停止,HTML-按钮拒绝停留在滚动DIV中-堆栈溢出

顺晟科技

2022-10-18 12:59:07

我在div中有许多按钮，当div滚动时，它们拒绝停留在固定位置，我不明白为什么。我在其他地方做过这个，所以我应该可以做到，但我今天在兜圈子。

我已经隔离了足够的应用程序，可以轻松地复制它。它在屏幕中央放置了一个div，并在右上角放置了一个小的退出按钮。我希望按钮（以及所有其他按钮）相对于div保持固定。我错过了什么？

<代码><；！文档类型HTML>；<；HTML（>；）<；头部>；<；标题>；滚动<；/标题>；<；元字符集=' UTF-8 '/>；<；样式>；DIV.DT-baseContainer{宽度：50VW；高度：50VH；最小宽度：400px；最小高度：300px；左：50%；最高：50%；Transform：转换（-50%，-50%）；位置：绝对；border-radius：20px；溢出：自动；}DIV.DT-container{背景色：浅蓝色；边框：3px纯品蓝；文本对齐：居中；}button.DT-quit{边框样式：实心；border-radius：4px；border-color：继承；宽度：20px；高度：20px；背景色：白色；颜色：红色；字体粗细：粗体；字体大小：12px；文本对齐：居中；保证金：0；填充：0；Z指数：20；顶部：5px；右：5px；位置：绝对；游标：指针；}<；/样式>；<；/标题>；<；DIV类=' DT-BaseContainer DT-Container ' ID=' DT_容器'>；sdfsdf1<；br>；sdfsdf2<；br>；sdfsdf3<；BR>；SDFSDF4<，BR>，SDFSDF5<，BR>，SDFSDF6&；BR&>，SDfSDF7&；，SDfSDF8&；，sdfsDF18<、br&>，sdfsDF19<.BR>；sdfsdf20<；br>；sdfsdf21<；br>；sdfsdf 22<；BR>；SDFSDf23<，BR>，SDFSDf24<，BR&>，SDFSDf 25<，BRamp；gt；SDF SDf26&；BR&>，SDF SDf27&；BRamp；gt；sDFSDf28<.BR>；<；Button ID=' DT_退出' Class=' DT-Quit ' Title='停止'>；X<；/Button>；<；/DIV>；<；/HTML>；

[编辑]当然，<代码>位置：固定；是不相关的，除非它相对于屏幕是固定的，所以我删除了提及。但是I C=仍然不能让这个简单的东西工作。

顺晟科技：

我讨厌回答自己的问题，但这是我的愚蠢……当然.

上面关于我的

<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<meta charset='utf-8'/>
<style>
div.dt-baseContainer {
    width: 50vw;
    height: 50vh;
    min-width: 400px;
    min-height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    border-radius: 20px;
    overflow: auto;
}

div.dt-container {
    background-color: lightblue;
    border: 3px solid royalblue;
    text-align: center;
}

button.dt-quit {
    border-style: solid;
    border-radius: 4px;
    border-color: inherit;
    width: 20px;
    height: 20px;
    background-color: white;
    color: red;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 0;
    z-index: 20;
    top: 5px;
    right: 5px;
    position: absolute;
    cursor: pointer;
}
</style>

</head>
<div class='dt-baseContainer dt-container' id='dt_container'>
sdfsdf1<br>sdfsdf2<br>sdfsdf3<br>sdfsdf4<br>sdfsdf5<br>sdfsdf6<br>sdfsdf7<br>sdfsdf8<br>sdfsdf9<br>sdfsdf10<br>
sdfsdf11<br>sdfsdf12<br>sdfsdf13<br>sdfsdf14<br>sdfsdf15<br>sdfsdf16<br>sdfsdf17<br>sdfsdf18<br>sdfsdf19<br>sdfsdf20<br>
sdfsdf20<br>sdfsdf21<br>sdfsdf22<br>sdfsdf23<br>sdfsdf24<br>sdfsdf25<br>sdfsdf26<br>sdfsdf27<br>sdfsdf28<br>sdfsdf30<br>
<button id='dt_quit' class='dt-quit' title='Stop'>X</button>

</div>

</html>

是问题所在

的建议是在转移注意力。在滚动流中，基本上不可能相对于其容器固定元素。

解决方案是将我的滚动div和按钮都放在一个额外的包含非滚动div的地方。这不仅是有意义的--容器封装了滚动和非滚动内容，而不必将后者放在前者中--而且我的初始代码非常接近。

将我现有的div类放在外部div上可以解决这个问题。

上一篇：Python-使用Beautiful 下一篇：JavaScript-搜索栏vue.

网站建设

Html

html鼠标经过滚动停止,HTML-按钮拒绝停留在滚动DIV中-堆栈溢出