Vuetify + Electron이 있는 고정 헤더 아래의 스크롤 막대

Vuetify + Electron이 있는 고정 헤더 아래의 스크롤 막대

나는 Vuetify와 Electron을 사용하여 내 직장에서 어떤 일을 하는 것을 도와주는 앱을 만들고 있어.브라우저Window 프레임을 비활성화하고 헤더를 버튼을 사용하여 창을 닫을 수 있는 끌 수 있는 영역으로 만들었다.나는 전자 vuetify 템플릿을 사용하고 있다.

vue init vuetifyjs/electron

내 문제는 스크롤바가 꼭대기까지 도달한다는 것이지만 나는 고정된 머리글 아래에 그것을 두고 싶다.

html, body, app div, content div 태그에 오버플로 속성을 가지고 놀려고 했지만 성공하지 못했다.

내가 이걸 어떻게 해?

유사한 레이아웃을 가진 브라우저에서도 이러한 동작을 볼 수 있기 때문에 이것은 순전히 CSS 질문이다.이 문제를 해결하는 가장 쉬운 방법은 플렉시블 레이아웃을 사용하는 방법:

HTML:

<div class="container">
  <div class="titlebar"></div>
  <div class="content">
    <h1>So much content we scroll</h1>
    <h1>So much content we scroll</h1>
    <!-- etc -->
  </div>
</div>

CSS:

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.titlebar {
  background-color: blue;
  height: 35px;
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
  overflow-x: auto;
}

이 코드펜에서 확인하십시오.

나는 이 질문에 대한 구체적인 답을 제시하고자 하는데, 이것은 일렉트로닉의 관련 여부에 상관없이 적용되어야 한다.

Vuetify의 기본 스타일은 이것을 단순한 CSS 솔루션이 제공할 수 있는 것보다, 특히 레이아웃이 더 복잡해질 때 더 어렵게 만든다.

이 예에서는 Vuetify의 사전 정의된 테마에서 복잡한 레이아웃을 사용하고 있으며

vuetify는 overflow-y: html 요소를 스크롤하여 첫 번째 단계는 여기에 오버라이드를 추가하는 것이다.

html {
  overflow: hidden;
}

이렇게 하면 앱의 전체 높이에 해당하는 오른쪽의 바가 없어진다.

다음으로 v-content 영역을 스크롤 가능 영역으로 설정하십시오.이 지역을 설정할 때 주의해야 할 몇 가지 요령이 있다.

• 디스플레이 플렉스가 이미 선언됨
• Vuetify는 스타일 속성에 패딩을 설정하므로 케이스에 따라 오버라이드해야 함
• 머리글 높이(64px에서 머리글 높이를 변경하는 경우에만 해당) 여백 필요
• calc를 사용하여 내용 용기의 높이에서 헤더 높이를 제거해야 함(위의 것과 동일)
• 오른쪽에 해군 서랍이 있으면 이 문제를 해결하려면 수업을 바인딩해야 할 것이다.

v-content에 대한 내 CSS는 다음과 같이 생겼으며, 스타일 바인딩을 통해 Vuetify에 의해 설정되므로 패딩을 재정의하는 것이 중요하다.

main.v-content {
  width: 100vw;
  height: calc(100vh - 64px);
  flex-direction: column;
  overflow: scroll;
  margin-top: 64px;
  padding-top: 0 !important;
}

템플릿의 v-content 태그에 있는 임시 오른쪽 드로어 상태에 바인딩된 클래스가 있어, 이렇게 하면 스크롤 막대가 열렸을 때 오른쪽 탐색 드로어 아래로 사라지지 않음:

<v-content :class="{ draweropen: drawerRight }">

그리고 그 바운드 클래스에 대한 CSS, 다시 한 번 드로어가 열려 있을 때 Vuetify가 v-content를 붙이는 기본 오른쪽 패딩을 제거하기 위해 중요한 것이 필요할 것이다.

.draweropen {
  width: calc(100vw - 300px) !important;
  padding-right: 0 !important;
}

이 CodePen 예에서 내가 하고 있는 것처럼 콘텐츠가 채팅처럼 하단에 로드된 경우 선택적으로 플렉시블 방향을 컬럼 리버스(column-reverse)로 설정할 수 있다.

v-main을 감싸고 스크롤 바를 기본(전체 html) 대신 메인 컨테이너로 옮기는 작은 구성 요소를 만들었다.

v-main을 이것으로 교체하기만 하면 된다.

<template>
  <v-main class="my-main">
    <div class="my-main__scroll-container">
      <slot />
    </div>
  </v-main>
</template>

<script>
export default {
  mounted: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = 'hidden'
  },
  destroyed: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = null
  },
}
</script>

<style>
.my-main
  height: 100vh

.my-main__scroll-container
  height: 100%
  overflow: auto
</style>

참조URL: https://stackoverflow.com/questions/48291122/scroll-bar-below-fixed-header-with-vuetify-electron