스크롤 막대는 svg의 버튼이 컨테이너 하단에있는 경우에만 표시됩니다.

-1

d3을 사용하여 svg를 확대합니다.스크롤 막대는 svg의 버튼이 컨테이너 하단에있는 경우에만 표시됩니다.

svg의 특정 부분이 보이지 않는 경우에만 스크롤 막대를 표시하고 싶습니다 (예제에서 두 개의 사각형).

내 문제는 스크롤바는 svg의 맨 아래 줄이 본문의 맨 아래 줄에 도달 할 때만 나타납니다. 나는 최고 라인에 대해서도 똑같이하고 싶다.

이 그림에서 노랑색 배경이 몸통 아래쪽에 닿으므로 저에게 스크롤바를 얻으 려합니다.

왜 스크롤이 예에 표시되지 않습니다? SVG의 상단에 유래에서 미리보기가 예상대로 작동하지 않기 때문에 여기에

에서, JS 빈입니다 ... 볼 수 없습니다 : http://jsbin.com/wewikokova/1/edit

var svg = d3.select('svg'); 
 
var body = d3.select('body'); 
 

 
body.call(d3.zoom().on('zoom', function() { 
 
    svg.node().setAttribute('transform', d3.event.transform); 
 
}));

body { 
 
    background: white; 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    overflow: auto; 
 
} 
 

 
svg { 
 
    background: yellow; 
 
    
 
    width: 1000px; 
 
    height: 500px; 
 
} 
 

 
.item-1 { 
 
    fill: blue; 
 
    
 
    x: 489px; 
 
    y: 38px; 
 
    width: 64px; 
 
    height: 36px; 
 
} 
 

 
.item-2 { 
 
    fill: blue; 
 
    
 
    x: 590px; 
 
    y: 60px; 
 
    width: 102.4px; 
 
    height: 60px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script> 
 
</head> 
 
<body> 
 
    <svg xmlns="http://www.w3.org/2000/svg" transform-origin="0 0" viewBox="489 38 203 82"> 
 
     <g> 
 
\t \t \t <rect class="item-1" /> 
 
\t \t \t \t <rect class="item-2" /> 
 
\t \t \t </g> 
 
    </svg> 
 
</body> 
 
</html>

출처

2017-09-19 Charles

이 질문과 관련된 것 같습니다. https://stackoverflow.com/questions/27374111/how-can-i-have-scrollbar-when-position-is-negative. 스크롤 바가 없으면 콘텐츠가 맨 위에 던져지기 때문에 스크롤바가 없습니다. – Charles

정상, 상단 및 왼쪽 창 테두리 스크롤 triger하지 않습니다, 그래서 div 마진 - 상단 또는 여백 왼쪽 스크롤바 trigg없이 왼쪽 마이너스 설정할 수 있습니다.

출처

2017-09-19 09:33:09 KEKUATAN

그래서 여기에 해결책이 없습니까? – Charles

나는 상상할 수 없다. 상상하는 것이 더러운 것인데, 나는 말하고 싶지 않다. 어쩌면 어떤 해결책이 있는지도 모른다. idk, 지금은 내 작은 knowladge와 함께있다. asume yes – KEKUATAN

스크롤 막대는 svg의 버튼이 컨테이너 하단에있는 경우에만 표시됩니다.

답변

관련 문제