JavaScript 기반의 시간표 개요 화면을 만들고 있습니다. 그것은 왼쪽으로 행을하는 것처럼 시간대를 보여 주며, 맨 위를 가로 지르는 열로 날짜를 나타냅니다. http://www.cap2.co.uk/dev/timetable.htm요소 동작 위치 지정 : 다른 스크롤 요소 내 고정?
기본적으로, 나는 시간표 사업부의 상단에 일을 넣고 싶습니다, 그리고 그들을 요소 스크롤 할 때이 해결 한 :
여기 예를 들어이있다.
는 난 그냥 사업부 전에 일을 를 배치 할 수 있다는 것을 알고 있습니다. 그러나 레이아웃이 유동적이기 때문에 브라우저 (및 사용자 기본 설정)의 스크롤 막대 너비가 다양하기 때문에 아래의 표와 함께 제목에 문제가있을 수 있습니다.
이 div#timetable 전에/외부로해야합니다. 다른 <div>에서
랩 div#timetable. 외부 <div>position:relative; 내측 <div> (div#timetable)를 overflow:scroll;을 준다.
여기에 동작하는 예제입니다 : (약간 긴 숨이 찬) 아주 가까이
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<style>
#main {
padding-top:20px;
position:relative;
top:0px;
left:0px;
}
#main .scrollable {
height:50px;
overflow-y:scroll;
}
#main h2 {
position:absolute;
top:0px;
left:0px;
background:red;
width:100%;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is the example</h1>
<div id="main">
<h2>This text shouldn't move.</h2>
<!-- this is where you want div#timetable -->
<div class="scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta mi vel libero bibendum dapibus. Fusce enim lacus, egestas id malesuada et, mollis eu dolor. Integer pellentesque pulvinar dolor, quis lacinia elit tempus vel. Integer volutpat nisl nec nisi egestas a scelerisque libero convallis. Ut interdum, tellus sit amet cursus tristique, metus ligula vestibulum enim, tempus scelerisque dui urna id risus. Duis tempor, sem vel dignissim adipiscing, tellus erat sodales justo, a sodales nulla nibh ac arcu. Vivamus ut lacinia erat. Mauris quis condimentum velit. Morbi mauris nisl, bibendum a tincidunt egestas, convallis id arcu. Fusce purus orci, porttitor vel elementum eu, sagittis quis lacus. Praesent sed commodo turpis. Etiam vitae viverra sem. Nam condimentum massa vitae sapien adipiscing viverra. Proin feugiat mi a quam molestie sed sodales tortor vulputate. Mauris ultrices rhoncus lorem vel imperdiet.</p>
<p>Fusce pretium, massa ac fermentum laoreet, erat justo dignissim justo, et auctor massa tellus quis eros. Aenean ut mauris eget tortor porta egestas ut sed eros. Duis dignissim viverra orci dictum blandit. Quisque eleifend, arcu vitae tristique dignissim, tortor turpis cursus nunc, eget accumsan velit tortor vel leo. Sed nisl quam, consectetur vel rhoncus eu, rhoncus non tortor. Mauris nec rutrum diam. Sed sit amet augue est, eu dapibus orci. Nulla vel turpis magna, eu euismod est. Nulla interdum urna a lectus commodo in blandit erat fermentum. Duis sit amet commodo libero. Aliquam porttitor nulla ultrices sem dapibus fringilla.</p>
<p>Fusce faucibus egestas mi vel mollis. Donec at accumsan massa. Nullam vitae massa a dui facilisis dictum nec at quam. Quisque pharetra malesuada est id pulvinar. Suspendisse ut nunc enim. Donec tristique consectetur tempor. Vestibulum vitae imperdiet massa. Ut a lacus et ante molestie adipiscing. Ut cursus dapibus blandit. Cras ac varius orci. Duis aliquet lacinia turpis a tincidunt. Aenean sed elit urna, sagittis volutpat massa. Quisque iaculis neque sit amet ipsum aliquam non auctor lacus gravida. Donec vitae leo eget tellus lobortis dictum ac eget erat. Integer eget eleifend metus. Fusce accumsan cursus accumsan. In hac habitasse platea dictumst. Nullam egestas odio nec quam ornare vitae ultricies mi consectetur.</p>
<p>Duis ante eros, aliquam a euismod quis, porta ac augue. Sed lobortis, nulla eleifend adipiscing fringilla, ligula arcu tincidunt nisi, eget tincidunt elit nunc quis felis. Phasellus condimentum adipiscing risus non pellentesque. Morbi ornare viverra nulla in pulvinar. Integer vestibulum dui eget neque euismod pretium. Nullam dapibus cursus vehicula. Duis blandit neque sed diam porttitor a feugiat libero suscipit. Donec odio tortor, pellentesque at tempus ut, faucibus ut augue. In elementum volutpat ante, eu mollis orci iaculis sit amet. Nam ornare sagittis egestas. Fusce sit amet consequat dolor. Nullam feugiat arcu enim, rhoncus dictum sem. Aliquam erat volutpat. Nam venenatis tortor eu nisl semper ullamcorper eu eget lectus. Phasellus rhoncus est sit amet est ultricies ut ultricies tellus condimentum. Fusce posuere mi sed sapien molestie ullamcorper. Vivamus ac convallis purus. Suspendisse eleifend orci nec nibh sagittis consectetur. In sem elit, sagittis semper volutpat et, suscipit facilisis leo. Nulla facilisi.</p>
<p>Donec adipiscing, nisl vitae ornare ultricies, justo elit mattis est, ac vehicula nibh sem sed arcu. Nulla in purus vel risus ultricies consequat tempus a orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla sodales justo eu elementum. Aenean eget velit sem, quis pretium sem. Quisque luctus leo quis est rhoncus congue. Praesent tincidunt, elit eget imperdiet condimentum, justo elit accumsan ante, eget vestibulum turpis mi vitae diam. In porttitor bibendum arcu, ac sodales elit congue sed. Nulla facilisi. Ut turpis libero, venenatis sit amet tincidunt et, laoreet vel libero. Praesent eleifend porttitor imperdiet. Quisque et condimentum nisl. Etiam rhoncus suscipit ante, sit amet imperdiet tellus aliquet vel. Etiam ante neque, lobortis vitae consectetur in, cursus quis velit. Ut quis justo eu nisl ultricies vulputate nec ac lorem. </p>
</div>
</div>
</body>
</html>
, 그것은 적어도 지금 위에 머물고있다. 왼쪽 유일한 문제는 내가 사업부를 통해 스트레칭 할 때,이 부분과 같이, 스크롤 사업부의 스크롤 막대를 다루고 있다는 것입니다 : http://www.cap2.co.uk/dev/cover-scroll.png – Pete
연주 해 봅니다 이것은 다른 문제를 생성하지만 Z- 인덱스 (대답 참조)와 함께 ... –
그래, 나는 그것을 시도했다 - 불행히도 시간표의 표 배경은 스크롤을 시작하자마자 헤더를 가린다. 어쨌든 자바 스크립트로 구동된다는 것을 감안할 때, 나는 요소의 올바른 위치를 동적으로 설정하기 위해 http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels에 정착했다. 추악하지만 메인 브라우저에서 동작하는 것 같습니다. – Pete