overflow 相关问题

我在某个地方有一些HTML。我只想显示上下和下方的某些上下文。我的方法是使用<ins>使用<ins>，为<div>设置适当的高度，然后将overflow滚动到适当的位置。 <div>可能包含高于文本的图像，在这种情况下，我很难正确滚动。如果禁用了浏览器缓存，则大多发生这种情况。只是一个简单的示例，假设我有一些HTML，其中一个包含一个单个<div>。为简单起见，假设我希望我的新溢出<ins>具有图像的高度，并且我想滚动到图像的顶部，以便图像垂直填充<ins>。我计算图像的最高位置并滚动到它。因此，我希望看到完整的图像，但是我看到了<img>的顶部。示例（jsfiddle）;开发人员工具并禁用浏览器缓存以进行复制！！ <div>代码等待图像加载，然后创建我的新<div>。问题：禁用浏览器缓存，而不是滚动到图像的顶部，而是滚动到<ins>文本。此外，控制台输出为： const blueprintDiv = document.createElement("div"); blueprintDiv.style.cssText = "border: 1px solid; visibility: hidden;"; blueprintDiv.innerHTML = `<p>BEGIN</p><ins>BB<img src="http://www.google.com/intl/en_ALL/images/logo.gif"></ins><p>END1<br><br><br><br><br><br>END2</p>`; document.body.appendChild(blueprintDiv); const imgPromises = [Promise.resolve()]; const img = blueprintDiv.querySelector("img"); if (!img.complete) { imgPromises.push(new Promise(resolve => { img.onload = img.onerror = resolve; })); } Promise.all(imgPromises).then(() => { console.log("All images loaded."); const newDiv = document.createElement("div"); newDiv.style.cssText = `border: 1px solid red; display: block; overflow: auto; height: ${img?.offsetHeight}px`; for (const child of blueprintDiv.childNodes) { newDiv.appendChild(child.cloneNode(true)); } const insTop = blueprintDiv.querySelector("ins").offsetTop - blueprintDiv.offsetTop; const imgTop = img.offsetTop - blueprintDiv.offsetTop; const offsetTop = Math.min(insTop, imgTop); document.body.textContent = ""; document.body.appendChild(newDiv); newDiv.scrollTop = offsetTop; console.log(`Direct ScrollTop: ${newDiv.scrollTop}; offsetTop: ${offsetTop}; insTop: ${insTop}; imgTop: ${imgTop}`); setTimeout(() => { console.log(`Delayed ScrollTop: ${newDiv.scrollTop}; offsetTop: ${offsetTop}; insTop: ${insTop}; imgTop: ${imgTop}`); // newDiv.scrollTop = offsetTop; // Uncomment => correct scrolling }, 100); }); ，因此，第一次的位置似乎是正确的：<div>在148，图像顶部在52处。因此，我将BB设置为52。但是，经过短暂的延迟，浏览器以某种方式自动滚动到"Direct ScrollTop: 52; offsetTop: 52; insTop: 148; imgTop: 52" "Delayed ScrollTop: 147; offsetTop: 52; insTop: 148; imgTop: 52" 位置147，而不是在图像的顶部保持52。第二个问题解决了这个问题，但这对我来说似乎是一个黑客。是否有更干净的方法来解决此问题？我发现，设置图像的高度属性可以解决问题，并将您的<ins>滚动到图像的顶部而不是scrollTop位置。希望这有帮助 <ins> ，但我无法澄清或提供任何有关其工作原因的相关信息的链接。

javascript html overflow scrolltop

回答 0 投票 0

如何删除溢出：Bootstrap 5模态隐藏？

I正在使用Bootstrap 5用于React应用程序。我的问题是，第二次我打开模态时，以下样式放在身体元素上：style =“溢出：隐藏； padding-padding-

reactjs modal-dialog overflow

回答 2 投票 0

在父母的最低点中：300px；溢出不起作用如何修复它

S <template> <div class="chat"> <div class="container"> <div class="messages"> <p>s</p> </div> <div class="partials"> <div class="list"> <div class="partial"></div> <div class="partial"></div> <div class="partial"></div> <div class="partial"></div> <div class="partial"></div> <div class="partial"></div> <div class="partial"></div> <div class="partial"></div> <div class="partial"></div> </div> </div> </div> </div> </template> <style scoped> .container { width: 100%; display: flex; height: 100%; } .messages { width: 70%; background-color: #252525; border-radius:20px 30px 30px 20px; } .list { overflow-y: auto; max-height: 100%; } .partial { height: 50px; width: 100px; background-color: #000; margin-bottom: 20px; } .chat { min-height: 300px; background-color: rgb(var(--v-theme-surface)); grid-column: span 3 / span 3; grid-row: span 3 / span 3; border-radius: 20px; } </style> 在父母的最低点中：300px；溢出不起作用如何修复它这只是一个组件，如果问题位于其他地方，我可以给您整个代码我在死胡同，不知道接下来该怎么办 solution是： .partials { overflow-y: auto; max-height: 420px; }

html css vue.js overflow

回答 1 投票 0

C int 溢出奇怪的行为

我知道signed int 溢出在C 中是未定义的。我理解这一点是因为结果数字是不可预测的，但它仍然是一个数字。但是，此代码的行为与

c integer overflow

回答 1 投票 0

为什么position:sticky在父容器上没有溢出的情况下不起作用？

我正在尝试使用position:sticky创建一个粘性侧边栏，但它的行为不符合预期。即使我设置了正确的顶部值，当我滚动页面时，侧边栏也不会粘住。这里’...

css responsive-design overflow

回答 1 投票 0

如何在从左到右的元素开头添加文本溢出省略号

我有一个路径列表（由于缺乏更好的词，也许面包屑路径可以更好地描述它们）。有些值太长而无法在其父级中显示，因此我使用 text-overflow: ellipsis。 ...