Я поигрался с jsfiddle, после того, как не смог заставить дизайн работать в моем проекте, и я все еще терплю неудачу. Я использую Tailwind, но это не имеет значения, я могу стилизовать все, что мне нужно, любым способом, который мне нужен.
Либо я могу получить полосу прокрутки, но это для всей страницы, либо я могу заблокировать страница прокручивается, но содержимое затем просто выходит за пределы родительского, даже если у меня для параметра overflow-y установлено значение scroll.
В псевдокоде я хочу, чтобы страница выглядела следующим образом:
<header> #static/attached to top. No scroll bar to the side.
<body> #scrollable. Scroll bar always present.
<text input> #static/attached to bottom. No scroll bar to the side.
Здесь указана JS скрипка (https://jsfiddle.net/o6yjnmtp/2/), а CSS ниже. Элементы более или менее должны оставаться там из-за шаблонов. У меня есть полный контроль над стилем всех элементов. Если вы посмотрите на JSFiddle, обратите внимание, что у меня также есть тег body со стилем.
<body class="min-w-full min-h-full h-screen flex flex-col">
<div name="window" class="min-w-full overflow-hidden flex flex-col">
<div class="overflow-hidden flex flex-col">
<div id="story" class="min-w-full flex flex-col flex-1 justify-end overflow-y-scroll" phx-window-keyup="hotkey">
# CONTENT GOES HERE
</div>
</div>
<input id="prompt" type="textarea" class="min-w-full rounded-lg resize-y flex-shrink" placeholder="Enter Commands Here...">
</div>
</body>
Сейчас я заинтересован только в том, чтобы это работало в последнем браузере Chrome. Вот ссылки на вышеуказанные классы, если требуется более подробная информация.