자바 스크립트를 사용하지 않는 스크롤 요소 내용

Question

친애하는 모든 사람이 스크롤하는 방법이 있습니까? 없이없이 CSS의 내용 만 이동하면됩니까?

문제가 발생하면 해당 요소에 오버플로 : 숨김 및 공백이 있음 : 내용이 일부 숨겨 지도록 공백으로 처리됩니다. 요소는 일반적으로 자바 스크립트로 스크롤 할 수 있지만 자바 스크립트가 비활성화 된 경우 초기 렌더링시 (그리고 추가 대화식 스크롤없이) 적절히 이동해야합니다.

Answer 1

아니요. CSS를 직접 사용하지 마십시오.

div로 내용을 래핑하고 원하는 스크롤 양의 값을 margin-top 값으로 지정하여 시뮬레이션 할 수 있습니다.

갱신
멋진 아이디어가 사용자의 요구 사항에 맞는 경우 제이미가 그의 answer에 언급 무엇인가 (것은/제거가을 사용하는 경우 자바 스크립트와 함께 0으로 설정 기억).

---

갱신 여기에 2

내가 어떤 프레임을 필요로하지 않는다 제이미의 아이디어에서 만든 또 다른 솔루션입니다.

는 스크롤이 원하는 장소에서 앵커 <a name="anchor_name">..</a>을 넣고 거기에

<meta http-equiv="refresh" content="2;url=#anchor_name_here"> 

에 자동 스크롤을 사용합니다. http://www.jsfiddle.net/gaby/f3CVY/5/

에서

예 (메타 요소 (X) HTML 적합성에 대한 생각 머리에 가야하는 것은) 내가 그것을 테스트 모든 브라우저 (IE, 크롬, FF, 오페라, 사파리에 좋은 작품)

Answer 2

아니요, 페이지의 항목을 스크롤 할 수 없습니다 (URL의 해시 부분이 포함 된 iframe이 아닌 경우 브라우저가 css 또는 html이 아닌 스크롤의 초기 위치를 제어합니다). CSS와 HTML 만

Answer 3

또 다른 방법이 있는데, 이것은 꽤 해킹이지만, 다시로드하지 않아도 작동합니다.

다음 브라우저에서 내가 작품을 만든 솔루션 :

• 파이어 폭스 4 +
• 사파리 5+
• 크롬 6+
• 오페라 11 +
• IE 10 +
• Android 2.3 이상

정말 조금 해킹 된 것이므로 사용 여부를 확인하십시오.:)

약간의 설명은 내가 HTML5가 <input> -field에 autofocs 속성 사용. 이것은 입력을 집중 시키므로 뷰포트로 가져와야합니다. 따라서 주어진 위치로 스크롤됩니다. 강조된 외곽선을 없애고 입력을 전혀 보지 않으려면 스타일을 설정해야합니다. 그러나 이것은 여전히 ​​Safari에 깜빡이는 픽셀이 하나 있어야하므로, 오버레이처럼 작동하는 스팬으로 트릭을했습니다. display: none은 자동 초점을 트리거하지 않으므로 간단히 사용할 수 없습니다 (Safari에서만 테스트 됨).

데모

Try before buy

데모는 사파리와 크롬에서 실행됩니다. IE와 Firefox는 에서 자동 초점을 실행하지 않는 것 같습니다.

CSS

div.outer { 
    height: 100px; 
    width: 100px; 
    overflow: auto; 
} 

div.inner { 
    position: relative; 
    height: 500px; 
    width: 500px; 
} 

div.inner > input { 
    width: 1px; 
    height:1px; 
    position: absolute; 
    z-index: 0; 
    top: 300px; 
    left: 200px; 
    border:0; 
    outline:0; 
} 

div.inner > span { 
    width: 1px; 
    height:1px; 
    position: absolute; 
    z-index: 1; 
    top: 300px; 
    left: 200px; 
    background: white; 
} 

HTML

<div class="outer"> 
    <div class="inner"> 
     <input type="text" autofocus></input> 
     <span></span> 
    </div> 
</div>