CSS를 사용하여 div를 수직으로 스크롤할 수 있도록 하다

CSS를 사용하여 div를 수직으로 스크롤할 수 있도록 하다

이것.

<div id="" style="overflow:scroll; height:400px;">

을 주다div사용자가 가로와 세로로 스크롤할 수 있습니다.div를 수직으로만 스크롤할 수 있도록 변경하려면 어떻게 해야 합니까?

당신은 잘못된 물건을 사용하는 것 말고도 그것을 커버하고 있다.스크롤 막대는 모든 속성으로 트리거할 수 있습니다.overflow,overflow-x, 또는overflow-y각각은 다음 중 하나로 설정할 수 있습니다.visible,hidden,scroll,auto, 또는inherit현재 다음 두 가지를 보고 있습니다.

• auto- 이 값은 상자의 폭과 높이를 확인합니다.정의되어 있는 경우, 이러한 경계를 넘어서는 박스가 확장되지 않습니다.대신(콘텐츠가 이러한 경계를 초과하는 경우) 길이가 초과되는 경계(또는 둘 다)에 대해 스크롤 막대를 작성합니다.

• scroll- 이 값은 내용이 경계 세트를 초과하지 않더라도 스크롤 바를 강제로 표시합니다.내용을 스크롤할 필요가 없는 경우 막대는 "사용 안 함" 또는 비대화형으로 나타납니다.

세로 스크롤 바를 항상 표시하는 경우:

를 사용해 주세요.overflow-y: scroll이렇게 하면 필요 여부에 관계없이 수직 축에 스크롤 막대가 나타납니다.콘텍스트를 실제로 스크롤할 수 없는 경우 "사용 안 함" 스크롤 막대로 나타납니다.

상자를 스크롤할 수 있는 경우에만 스크롤 막대를 표시하는 경우:

그냥 사용하다overflow: auto현재 줄에 맞지 않을 때 기본적으로 다음 줄에만 내용이 이동하므로 가로 스크롤 막대는 생성되지 않습니다(단, 줄 바꿈이 비활성화되어 있는 요소에 있는 경우가 아니면).세로 막대의 경우 콘텐츠를 지정한 높이까지 확장할 수 있습니다.이 높이를 초과하면 나머지 내용을 볼 수 있는 수직 스크롤 막대가 표시되지만 높이를 초과하지 않으면 스크롤 막대가 표시되지 않습니다.

이렇게 해봐.

<div style="overflow-y: scroll; height:400px;">

뷰포트 높이를 100%로 사용하는 경우:

overflow: auto;
max-height: 100vh;

사용하다overflow-y: auto;디브에

그리고 너비도 맞춰야 합니다.

대신 이 코드를 사용할 수 있습니다.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x: overflow-x 속성은 요소의 내용 영역이 오버플로우될 경우 내용의 왼쪽/오른쪽 가장자리에 대해 수행할 작업을 지정합니다.
오버플로우:overflow-y 속성은 컨텐츠의 위쪽/아래쪽 가장자리에 대해 수행할 작업을 지정합니다(요소의 컨텐츠 영역이 오버플로일 경우).

★★★
표시:디폴트값내용이 잘리지 않으므로 내용 상자 외부에 렌더링될 수 있습니다.
hidden: 내용은 클리핑되며 스크롤 메커니즘은 제공되지 않습니다.
스크롤: 콘텐츠가 클리핑되고 스크롤 메커니즘이 제공됩니다.
auto: 오버플로우 박스에 스크롤 메커니즘을 제공합니다.
이니셜:이 속성을 기본값으로 설정합니다.
상속 부모 요소에서 이 속성을 상속합니다.

하시면 됩니다.overflow-y: scroll세로 스크롤에 사용합니다.

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>

문제는 이 모든 대답들이 반응하지 않았다는 것입니다.내가 원하지 않는 부모 디바의 키는 정해져 있어야 했다.나는 또한 언론의 질문을 하면서 많은 시간을 보내고 싶지 않았다.angular하고 있는 는, 탭 할 수 .angular 의은 모든 합니다.내부 콘텐츠를 스크롤할 수 있고 응답할 수 있습니다.$scope.tab = { title: '', url: '', theclass: '', ative: true }; 해서 의 윤곽을 cs로

.nav-tabs {
   border-bottom:none; 
} 

이 '이러다'도.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}기능을하지 않은 할 수 않는 합니다..nav > li > a {padding:0px;margin:0px;}

위의 답변들은 질문의 절반을 잘 설명해 주었다.나머지 반쪽을 위해서.

스크롤 바 자체를 숨기는 게 어때?이렇게 하면 (저를 포함한) 대부분의 사람들이 스크롤 바를 싫어하기 때문에 더 매력적으로 보일 것입니다.이 코드를 사용할 수 있습니다.

::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

다음 요지를 참조하십시오.https://gist.github.com/zeoneo/5f9fff92a12aa6d9d42065b5df68e9d5

플렉스를 사용하여 자동 스크롤 가능한 분할 창을 사용하여 레이아웃을 작성하는 데 도움이 될 수 있습니다.

body {
                background-color: aquamarine;
                margin: 0;
                padding: 0;
            }
            .container {
                height: 100vh;
                display: flex;
                flex-direction: column;
                background-color: bisque;
            }
            .left {
                width: 300px;
                background-color: lightblue;
                overflow: auto;
                scroll-behavior: smooth;

            }
            .right {
                flex:1;
                background-color: lightcoral;
                overflow: auto;
                scroll-behavior: smooth;
            }
            .sidebar-item {
                display: block;
                height: 100px;
                background-color: lightseagreen;
                margin: 5px;
            }
            .header {
                display: block;
                height: 100px;
                flex:none;
                background-color: aqua;
            }
            .content {
                flex:1;
                background-color: brown;
                display: flex;
                overflow: auto;
            }

<html>
    <head>
        <title>Hello World</title>

    </head>
    <body>
        <div class="container">
            <div class="header">
                Header
            </div>
            <div class="content">

            <div class="left myscroll">
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
            </div>
            <div class="right">
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
            </div>
        </div>

        </div>
    </body>
</html>

설명을 위해 코드에 코멘트를 추가했습니다.다음은 참고 자료입니다.https://www.w3schools.com/css/css_overflow.asp

div {
  overflow-y: auto; /* the auto value is similar to scroll, but it adds scrollbars only when necessary */
  word-break: keep-all; /* this is optional, so the words keep in one line */
  white-space: nowrap; /* this is optional, so the div can expands to the side */
}

<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

언급URL : https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css