Cuộn 2 nội dung DIV + nội dung chính bằng thanh cuộn chính của trình duyệt

Tôi không thể tìm ra cách giải quyết vấn đề này khi di chuyển nội dung trong hai trang + nội dung bên ngoài.Cuộn 2 nội dung DIV + nội dung chính bằng thanh cuộn chính của trình duyệt

Tôi có bố trí sau:

tiêu đề + chân
cuốn sách
trang với chiều rộng cố định và chiều cao.

Tôi muốn di chuyển các trang nội dung từ các scrollbar chính mà không cần bất kỳ thanh trang cuộn (như gmail soạn dụ)

Vấn đề chính là. sách sẽ hiển thị sau tiêu đề và nếu người dùng đang sử dụng độ phân giải màn hình nhỏ hơn, nó sẽ hiển thị thanh cuộn để cuộn xuống để xem sách đúng cách.

Sau đó, chúng tôi có hai trang, nội dung khác nhau và mỗi trang có thể dài hơn một trang khác. vì vậy chúng tôi muốn cuộn qua tất cả dữ liệu, trước khi chúng tôi tiếp tục di chuyển trở lại chân trang một lần nữa.

jsFiddle Example:http://jsfiddle.net/7vqzF/2/

Nó sẽ là tuyệt vời để giải quyết việc này từ chỉ css.

Layout Cấu trúc: (giải pháp nên chỉ có một thanh cuộn trình duyệt chính, để kiểm soát các trang và nội dung cuốn sách bên ngoài từ nó.) layout structure

Nguồn

2013-08-07 Basit

tôi nghĩ rằng loại bỏ .outsideBookSpace chiều cao lớp này vấn đề của bạn được giải quyết có thể – falguni

@Fags tôi muốn di chuyển 2 div từ cuộn chính. Tôi không thấy làm thế nào loại bỏ .outsideBookSpace là giải pháp cho điều đó. – Basit

bạn chỉ muốn một phần .book để cuộn bằng cuộn trình duyệt. ??? – maverickosama92

Nếu tôi nhận được câu hỏi của bạn đúng bạn đang tìm kiếm các thuộc tính CSS fixed. Dưới đây là một số trong đó có CSS HTML mà có thể thực hiện chính xác những gì bạn đang sau:

<html> 
    <head> 
    <style> 
     body { 
     margin-top: 150px; 
     } 

     .header { 
     width: 100%; 
     position: fixed; 
     top: 0; 
     background-color: white; 
     border-bottom: 2px solid lightblue 
     } 

     .footer { 
     width: 100%; 
     position: fixed; 
     bottom: 0; 
     background-color: white; 
     border-top: 2px solid lightblue 
     } 

     .book table td { 
     vertical-align: top; 
     } 

     .page1, .page2 { 
     border: solid 1px red; 
     width: 400px; 
     } 
    </style> 
    </head> 

    <body> 
    <div class="header"> 
     <h1>Header</h1> 
     <ul> 
     <li>home</li> 
     <li>contact us</li> 
     </ul> 
    </div> 

    <div class="book"> 

     <table> 
     <tr> 
      <td> 
      <div class="page1"> 
       <h2>Page1</h2> 
       scroll from main scrollbar<br/> 
       scroll from main scrollbar<br/> 
       scroll from main scrollbar<br/> 
       ... 
      </div> 
      </td> 
      <td> 
      <div class="page2"> 
       <h2>Page2</h2> 
       scroll from main scrollbar<br/> 
       scroll from main scrollbar<br/> 
       ... 
      </div> 
      </td> 
     </tr> 
     </table> 
    </div> 

    <div class="footer"> 
     My Footer 
    </div>  

    </body> 
</html>

Đây là một ảnh chụp màn hình từ trình duyệt của tôi hiển thị HTML trên: enter image description here

Các cuộn Trình duyệt Scrollbar chỉ page1/page2 <div> elemtents nhưng không phải là phần tử đầu trang và chân trang.

Và cuối cùng là đây là jsFiddle Link cho bản trình diễn trực tuyến.

Nguồn

2013-08-21 10:07:44

đây là bản demo về những gì tôi có, vui lòng chuyển sang trang trước, bằng cách kéo từ cuối trang. để xem hai trang demo: http://v4.globalquran.com/ như bạn có thể thấy, không thể sử dụng kiểu cố định trên đó. – Basit

IMHO vẫn có thể sử dụng kiểu cố định nhưng sẽ khó thực hiện hơn. Nhưng bên cạnh vấn đề với biên giới hình ảnh và JavaScript turnjs (không được đề cập trong câu hỏi ban đầu) làm ví dụ của tôi những gì bạn mong đợi nó để làm gì? –

Có, nhưng cả hai kích thước trang đều khác nhau trong ví dụ bạn đã cung cấp. kích thước trang cần phải giống nhau và kích thước cuộn nên/có thể khác nhau và chúng sẽ cuộn cả hai cùng một lúc, nếu chúng cần được cuộn. cũng như thế nào với turnjs và biên giới ảnh .. – Basit

Đặt phần tiêu đề cần được sửa trong div riêng biệt và áp dụng các kiểu này.

<div class="fix"> 
    <h1> Header</h1> 
    <menu><ul><li>home</li><li>contact us</li></ul></menu> 
    </div> 
.fix{ 
position:fixed; 
    top:0px; 
    left:0px; 
    background:#FFF; 
    width:100%; 
    border-bottom:1px solid black; 
}

cho không gian thêm div khác để dưới cùng của tiêu đề

<div class="space"></div> 
.space{ 
width:100%; 
height:150px; 
}

Đây là jsfiddle.

Nguồn

2013-08-27 10:52:51

không thể làm điều đó với hiệu ứng lật sách, như thế này v4.globalquran.com – Basit

Bạn có thể sử dụng cách tiếp cận sau với CSS thuần túy và không có bảng.

See online demo here.

Kết quả: Tuy nhiên

Example

Nó có nghĩa là bạn cần phải thay đổi cấu trúc tài liệu một chút (tôi đang sử dụng các yếu tố HTML5 nhưng điều này có thể dễ dàng được thay đổi vào các div bình thường nếu có yêu cầu) - như bạn có thể xem cấu trúc khá đơn giản:

<header>Header 
    <nav>Menu</nav> 
</header> 

<main> 
    <div class="page"> 
     <h3>Page 1</h3> 
     scroll from main scrollbar 
     .... 
    </div> 
    <div class="page"> 
     <h3>Page 2</h3> 
      scroll from main scrollbar 
      .... 
    </div> 
</main> 

<footer>Footer</footer>

Bây giờ, chỉ cần tạo kiểu này để bạn có thể sử dụng thanh cuộn chính để cuộn "cả hai trang". Lớp học thiết yếu trong ngữ cảnh này là:

.page { 
    float:left; 
    margin:70px 10px 50px 10px; 
    border:1px solid #000; 
    width:45%; 
}

Phần quan trọng với lớp page là lề trên và dưới được đặt để khớp với đầu trang và chân trang. Đây là điều làm cho hai trang hiển thị ngay cả khi đầu trang và chân trang được cố định.

Phần còn lại của CSS chỉ là ví dụ:

html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
header { 
    position:fixed; 
    top:0; 
    width:100%; 
    height:70px; 
    font:32px sans-serif; 
    color:#fff; 
    background:#555; 
} 
nav { 
    position:absolute; 
    bottom:0; 
    font:12px sans-serif; 
} 
footer { 
    position:fixed; 
    width:100%; 
    bottom:0; 
    height:50px; 
    background:#555; 
}

Nguồn

2013-08-28 07:40:00 K3N

không thể làm điều này với hiệu ứng lật sách .. như bản demo này v4.globalquran.com – Basit

@Basit lật sách? Câu hỏi của bạn không nói gì về hiệu ứng lật sách nên IMO bài đăng có chút sai lệch. Và bạn có thể sử dụng các biến đổi CSS và hoạt ảnh để đạt được hiệu ứng lật sách. – K3N

vâng, đó là lỗi của tôi, tôi đã không giải thích được tình hình của mình đúng cách.chúng tôi đã sử dụng hiệu ứng lật sách với turn4.js, nhưng cuộn này đang gây ra sự cố cho chúng tôi. do đó, không biết làm thế nào để đi xung quanh nó. sử dụng vị trí cố định, không phải là một giải pháp cho nó. – Basit

Cuộn 2 nội dung DIV + nội dung chính bằng thanh cuộn chính của trình duyệt

Trả lời

Các vấn đề liên quan