페이지 스크롤바로 특정 요소 만 스크롤

갉아 먹다

div2에서 스크롤 막대를 이동해야합니다.

| div1 | |
|--------------------- | |
| |SCRL| |
| |SCRL| div3 |
| |SCRL| |
| div2 |SCRL| |
| |SCRL| |
| |SCRL| |
| |SCRL| |

이와 같은 전체 인터페이스 외부로.

| div1 | ||SCRL|
|----------------------| ||SCRL|
| | ||SCRL|
| | div3 ||SCRL|
| | ||SCRL|
| div2 | ||SCRL|
| | ||SCRL|
| | ||SCRL|
| | ||SCRL|

그리고 새 스크롤바를 스콜하면 div2가 정상적으로 이동합니다.

.parent {
  border: 1px solid blue;
  margin:0px;
}
.div3{
  float:right;
  height:480px;
  width:28%;
  border:1px solid green;
}
.div1 {	
  position:fixed;
  width:70%;
  height:200px;
  border: 1px solid red;
}
.div2{
  position:fixed;
  margin-top:200px;
  width:70%;
  height: 280px;
  border: 1px solid purple;
}
<div class="parent">
  <div class="div3">div 3</div>
  <div class="div1">div 1</div>
  <div class="div2"style="overflow-y: scroll">
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
  </div>
</div>

https://fiddle.jshell.net/sep1u4jf/

많은 감사합니다! :)

로코 C. 불잔

상단 및 오른쪽 요소 모두에 사용 position:fixed하기 만하면됩니다 .

html, body{height:100%; margin:0;}

/* LAYOUT */
#top{
  position: fixed; z-index:1;
  left: 0; top: 0;
  width: 70%; height: 99px;
  background: #0ff;
}
#right{
  position: fixed; z-index:1;
  right: 0; top: 0;
  width: 30%; height: 100vh;
  background: #0bf;
}
#bottom{
  position: relative;
  overflow-y: auto;
  top: 99px;
  width: 70%; min-height: calc(100vh - 99px);
  background: #f0b;
}
<div class="parent">

  <div id="top">top fixed</div>
  <div id="right">right fixed</div>

  <div id="bottom">
    <p style="height:1200px; border:4px dashed #000; margin:0;"></p>
  </div>

</div>

PS : 나는 사용 99px heighttop에 대한 데모 . 모든 교체 99px와 함께 480px당신이 무엇을 필요로하거나.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Tkinter 스크롤바를 특정 위젯으로 이동

분류에서Dev

페이지의 특정 위치로 스크롤 한 후 요소를 동적으로 렌더링하는 방법은 무엇입니까?

분류에서Dev

다른 구성 요소의 특정 태그로 스크롤

분류에서Dev

요소 높이를 clientHeight로 설정하면 페이지 스크롤이 발생합니다.

분류에서Dev

스크롤 가능한 목록을 최대 크기로 설정하지만 필요하지 않을 때는 축소하려면 어떻게해야합니까?

분류에서Dev

페이지 하단에 고정 된 스크롤 가능한 요소

분류에서Dev

스크롤 가능한 요소 만 원할 때 페이지 확장

분류에서Dev

parralax 스크롤로 고정되지 않은 고정 요소

분류에서Dev

HTML 스크롤 페이지를 어떻게 만드나요?

분류에서Dev

페이지가 특정 요소로 스크롤 될 때 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

PDF 문서의 특정 페이지로 스크롤

분류에서Dev

DIV 요소의 특정 스크롤바 스크롤

분류에서Dev

jQuery-스크롤이 특정 요소를 칠 때 자동 입력 포커스

분류에서Dev

가로 스크롤로 요소를 만드는 올바른 방법

분류에서Dev

특정 요소에 대한 스크롤을 방지 하시겠습니까?

분류에서Dev

UIScrollView 특정 지점으로 스크롤

분류에서Dev

HTML / CSS 특정 div 만 스크롤하는 한 페이지 웹 사이트

분류에서Dev

요소가 페이지와 함께 스크롤되지만 특정 상단 값에서 멈춰야합니다.

분류에서Dev

스크롤 위치가 상단에 있는지 확인한 후 일정 시간 후 특정 높이로 페이지 스크롤 만들기

분류에서Dev

스크롤 이벤트에서 특정 지점으로 스크롤하는 jQuery

분류에서Dev

요소를 세로로 고정하고 가로로 스크롤하면 이동

분류에서Dev

스크롤 뷰를 만드는 방법, iOS 스크롤시 특정 페이지에서 스크롤

분류에서Dev

페이지 스크롤 크로스 브라우저 설정

분류에서Dev

페이지 상단에 있지 않을 때 스크롤에 고정 된 요소 만들기

분류에서Dev

페이지 상단에 있지 않을 때 스크롤에 고정 된 요소 만들기

분류에서Dev

스크롤바없이 배경 콘텐츠를 스크롤하지 않고 고정 위치 div를 스크롤 가능하게 만듭니다.

분류에서Dev

스크롤바없이 배경 콘텐츠를 스크롤하지 않고 고정 위치 div를 스크롤 가능하게 만듭니다.

분류에서Dev

CSS : 이미지 길이로 페이지 스크롤 만들기

분류에서Dev

아래로 스크롤 할 때만 요소로 스크롤 스냅

분류에서Dev

기능이 있고 특정 요소로 스크롤 할 때 트리거하고 싶었습니다.

Related 관련 기사

  1. 1

    Tkinter 스크롤바를 특정 위젯으로 이동

  2. 2

    페이지의 특정 위치로 스크롤 한 후 요소를 동적으로 렌더링하는 방법은 무엇입니까?

  3. 3

    다른 구성 요소의 특정 태그로 스크롤

  4. 4

    요소 높이를 clientHeight로 설정하면 페이지 스크롤이 발생합니다.

  5. 5

    스크롤 가능한 목록을 최대 크기로 설정하지만 필요하지 않을 때는 축소하려면 어떻게해야합니까?

  6. 6

    페이지 하단에 고정 된 스크롤 가능한 요소

  7. 7

    스크롤 가능한 요소 만 원할 때 페이지 확장

  8. 8

    parralax 스크롤로 고정되지 않은 고정 요소

  9. 9

    HTML 스크롤 페이지를 어떻게 만드나요?

  10. 10

    페이지가 특정 요소로 스크롤 될 때 함수를 호출하는 방법은 무엇입니까?

  11. 11

    PDF 문서의 특정 페이지로 스크롤

  12. 12

    DIV 요소의 특정 스크롤바 스크롤

  13. 13

    jQuery-스크롤이 특정 요소를 칠 때 자동 입력 포커스

  14. 14

    가로 스크롤로 요소를 만드는 올바른 방법

  15. 15

    특정 요소에 대한 스크롤을 방지 하시겠습니까?

  16. 16

    UIScrollView 특정 지점으로 스크롤

  17. 17

    HTML / CSS 특정 div 만 스크롤하는 한 페이지 웹 사이트

  18. 18

    요소가 페이지와 함께 스크롤되지만 특정 상단 값에서 멈춰야합니다.

  19. 19

    스크롤 위치가 상단에 있는지 확인한 후 일정 시간 후 특정 높이로 페이지 스크롤 만들기

  20. 20

    스크롤 이벤트에서 특정 지점으로 스크롤하는 jQuery

  21. 21

    요소를 세로로 고정하고 가로로 스크롤하면 이동

  22. 22

    스크롤 뷰를 만드는 방법, iOS 스크롤시 특정 페이지에서 스크롤

  23. 23

    페이지 스크롤 크로스 브라우저 설정

  24. 24

    페이지 상단에 있지 않을 때 스크롤에 고정 된 요소 만들기

  25. 25

    페이지 상단에 있지 않을 때 스크롤에 고정 된 요소 만들기

  26. 26

    스크롤바없이 배경 콘텐츠를 스크롤하지 않고 고정 위치 div를 스크롤 가능하게 만듭니다.

  27. 27

    스크롤바없이 배경 콘텐츠를 스크롤하지 않고 고정 위치 div를 스크롤 가능하게 만듭니다.

  28. 28

    CSS : 이미지 길이로 페이지 스크롤 만들기

  29. 29

    아래로 스크롤 할 때만 요소로 스크롤 스냅

  30. 30

    기능이 있고 특정 요소로 스크롤 할 때 트리거하고 싶었습니다.

뜨겁다태그

보관