Прокручиваемый div с изменяемым размером и фиксированной кнопкой
Следующий HTML-код показывает прокручиваемый элемент div с возможностью изменения размера с кнопкой и дополнительным элементом содержимого.
.container {
width: 100%;
max-width: 100%;
height: 150px;
position: relative;
overflow: auto;
resize: both;
white-space: nowrap;
background: lightgray;
}
.container .fixed {
position: absolute;
right: 5px;
top: 5px;
}<div class = "container">
<button class = "fixed">Test</button>
<div class = "content">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>
</div>Кнопка должна быть зафиксирована в правом верхнем углу div. Это отлично работает для изменения размера, однако при прокрутке кнопка тоже перемещается. Как я могу это исправить?
Ответы 2
Я изначально неправильно понял назначение кнопки. В любом случае, работает следующее. Вы можете изменить размер div, и кнопка останется в правом верхнем углу. [Изменить] — Поскольку эти два элемента разделены, я не верю, что CSS может это сделать, поэтому я добавил немного JS, чтобы завершить работу. Это грубо, но эффективно, и вы можете расширить эту тему.
const resizer = new ResizeObserver((items) => {
items.forEach(item => {
const btn = document.getElementById("content-button-id");
btn.style["right"] = item.target.clientHeight < item.target.scrollHeight ? "25px" : "5px";
})
});
window.addEventListener('DOMContentLoaded', () => {
const el = document.getElementById("content-id");
resizer.observe(el);
});.container {
position: relative; /* Required for inner absolute position */
height: 150px;
resize: both; /* overflow is required to accompany this */
overflow: auto;
display: flex; /* use flex box to fill vertical spaces */
flex-flow: column;
}
.container .content {
position: relative;
flex: 1 1 auto;
white-space: nowrap;
background: lightgray;
overflow: auto;
z-index: 5;
}
.container .content-button {
position: absolute; /* pin to outer container */
right: 5px;
top: 5px;
z-index: 10;
}<!DOCTYPE html>
<html lang = "en">
<head>
<title>Resize Component Example</title>
</head>
<body>
<div class = "container">
<button id = "content-button-id" class = "content-button">Test</button>
<div id = "content-id" class = "content">
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</div>
</div>
</body>
</html>Несколько скриншотов в действии
Я проверил это, и это работает: кнопка перемещается при изменении размера, а когда перемещается ползунок, она также сохраняется. В каком браузере вы это пробовали? Я пробовал Chrome и Edge
Я тестировал на Edge (а теперь снова на Chrome с тем же результатом). Можете ли вы вставить в свой ответ вырезанный код (как я это сделал сейчас в своем вопросе), показав, что он работает?
@ stonar96 Вот, извините за задержку с ответом.
Спасибо, все работает нормально. При вставке нескольких строк текста появляется вертикальная полоса прокрутки, частично закрывающаяся кнопкой. Как вы думаете, можно ли также сдвинуть кнопку немного влево в зависимости от того, видна ли вертикальная полоса прокрутки? (Это также сработало в примере из моего вопроса. Я удалил свой -1 и поставил ему +1 сейчас. Я бы принял это как окончательный ответ, если вы также можете решить проблему, описанную в этом комментарии.)
Это не чистый CSS, но он помогает.
Вам следует переместить стиль overflow: auto внутри content класса.
Кроме того, настройте класс content так, чтобы он имел высоту 100%, если вы собираетесь прокручивать внутри контейнера div, если нет, вы можете удалить height: 100% и прокручивать внутри самого содержимого.
.container {
width: 100%;
max-width: 100%;
height: 150px;
position: relative;
resize: both;
white-space: nowrap;
background: lightgray;
}
.container .fixed {
position: absolute;
right: 5px;
top: 5px;
}
.container .content{
overflow: auto;
height: 100%;
}<div class = "container">
<button class = "fixed">Test</button>
<div class = "content">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</div>
</div>При этом размер контейнера больше не подлежит изменению.
Это не работает. Когда я изменяю размер div, кнопка просто остается там, где она есть, и, следовательно, она больше не находится в правом верхнем углу div.