다른 div의 스크롤 div

두 번째 부분에 스크롤을 추가하고 싶습니다. "chat-bar"div의 "chat-messages"div입니다. 나는이 "chat-messages"를 스크롤 할 수있게 만들고, scrool없이 사이트의 나머지 부분을 남기고 싶습니다. 이 순간에 나는 "input-row"div를보기 위해 전체 사이트를 스크롤해야한다. "chat-bar"에 overflow: auto을 설정하면 꽤 작동하지만, 그때는 전체 input-row이 스크롤에 포함됩니다. 나에게 최선의 CSS/HTML 옵션을 제공하여이 문제를 해결하거나 간단한 자바 스크립트 라이브러리를 제공하십시오.다른 div의 스크롤 div

jsfiddle 링크 :

jsfiddle.net/o9vmfgpx/3

편집 : 나는 그것이 작동하지만, 일부 해키 방법으로했다. (2016년 10월 14일 등) IE, EDGE, 크롬, 파이어 폭스와 오페라의 최신 버전에

.chat-messages { 
    overflow-y: scroll; 
    -ms-overflow-style: none; 
} 
.chat-messages::-webkit-scrollbar { 
    display: none; 
} 

@-moz-document url-prefix() { 
    .chat-messages { 
     right: -5%; 
     padding-right: 3%; 
    } 
}

작품

출처

2016-10-14 Adam Mańkowski

기본 CSS에서 가능해야합니다. 예 : '.chat-messages {overflow-y : scroll; 높이 : 300 픽셀;}' – DBS

이미 솔루션을 찾았습니까? –

@ K.Daniek 예. 그러나 한 브라우저에 대한 해결책은 없습니다. 내가 찾은 해결책으로 내 질문을 업데이트했습니다. –

이 작동합니다.

body { 
     overflow:hidden; 
} 
.chat-messages { 
     overflow:scroll !important; 
}

출처

2016-10-14 15:29:29

나는 js 바이올린에 그것을 시도했지만 그곳에서 작동하지 않습니다. 나는 이것이 그것이 그것이 작동한다는 것을 알고있다. –

이것은 전체 사이트를 "정적"으로 만들고, 채팅 메시지에 scroolbar를 추가합니다. 그게 전부입니다. 채팅 메시지를 스콜 할 수 없습니다. –

시도해보십시오.

.input-row { 
    position: fixed; 
    bottom: 10px; 
    left: 10px; 
}

출처

2016-10-14 15:35:25

아래 CSS를 추가해보세요.

.chat-messages { 
    height:200px; 
    overflow:scroll; 
}

출처

2016-10-14 15:36:30 heady12

하지만 다른 해상도는 어떻게됩니까? 높이를 가시 사이트의 100 %로하고 싶습니다. –

높이를 100vh로 변경하는 방법은 무엇입니까? – heady12

다른 div의 스크롤 div

답변

관련 문제