Для моего приложения я пытаюсь добиться макета, аналогичного: https://www.naiveui.com/en-US/os-theme/ ... scriptions
Это означает, что заголовок, нижний колонтитул и часть контента. Что касается содержимого, я хочу, чтобы по умолчанию содержимое было прокручиваемым (в случае, если содержимое больше области просмотра), для этой настройки я следую примеру: https://www.naiveui.com/en-US/os -theme/comComponents/layout#absolute.vue
Для большинства моих страниц этого достаточно, и они работают хорошо.
Однако для одной из моих страниц , я хочу другую раскладку/настройку и вот мне нужно ваша помощь:
Для этой страницы мне нужны 3 горизонтальные части рядом друг с другом, первая и третья части должны быть «прикрепленными»/абсолютно позиционированы и иметь полосу прокрутки внутри них (если контент расширяет область просмотра), ну, средняя часть снова должна быть прокручиваемой по умолчанию (потому что здесь всегда много контента). Как в примере: https://www.naiveui.com/en-US/os-theme/ ... scriptions, в котором привязка (крайняя справа) липкая и прокручивается (только при фокусировке/наведении курсора), в крайнем левом углу меню (прикрепленное) и прокручиваемое (только при фокусировке/наведении курсора мыши), а средняя часть/содержимое прокручивается, а также прокрутка для привязки и части содержимого находится в крайнем правом углу.
В код ниже, я получил большая часть правильна, за исключением:
[*]Мне не нужен сайдинг по умолчанию, потому что другим моим страницам он не нужен
Handian Bridge
Это должен быть собственный n-макет с некоторой полосой прокрутки.
[*] «В-третьих, липкий, ожидайте, что если сфокусировать/навести курсор мыши, то это можно будет прокручивать», должно быть липким и не прокручиваться, если не сфокусировано/не наведено.
Код на данный момент:
Header
1st, left div
style="
display: flex;
flex-wrap: nowrap;
padding: 32px 24px 56px 56px;
"
>
2th, This can be scrollable
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
Pingshan Road 1
class="right-scrollbar"
style="width: 192px; position: sticky; top: 0"
@mouseover="isRightHovered = true"
@mouseleave="isRightHovered = false"
@focus="isRightHovered = true"
@blur="isRightHovered = false"
>
3rd, Sticky, expect if focused / hovered with mouse then this can
be scrollable
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Pingshan Road 2
Footer
export default {
data() {
return {
isRightHovered: false,
};
},
};
body {
overflow: hidden;
--header-height: 64px;
}
.n-layout-header,
.n-layout-footer {
background: rgba(128, 128, 128, 0.2);
padding: 24px;
}
.n-layout-sider {
background: rgba(128, 128, 128, 0.3);
}
.n-layout-content {
background: rgba(128, 128, 128, 0.4);
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... -scrollbar
