alvarotrigo.com/fullPage/ và bootstrap 3 vấn đề lưới

Question

Tôi đang sử dụng alvarotrigo.com/fullPage/ để có hiệu ứng fullpage tốt. Ngoài ra tôi đang sử dụng hệ thống lưới bootstrap 3, mà trông giống như:

<section id="section" class="section"> 
    <div class="home"> 
     <div class="container-fluid position-relative"> 
      <div class="row"> 
       <div class="col-sm-4"> 
       </div> 
       <div class="col-sm-4"> 
       </div> 
       <div class="col-sm-4"> 
       </div> 
      </div> 
     </div> 
    </div> 

Bây giờ, chúng ta thấy 3 cột, tất cả đóng trong phần, và html này tạo ra 3 coluns xem, và đó là ok.

Nhưng đối với các chế độ xem nhỏ hơn, ba cột này, chuyển thành 3 cột có chiều rộng đầy đủ và đây là vấn đề, như fullpage, js bây giờ bỏ qua cột thứ hai và thứ ba khi cuộn, vì vậy nếu tôi cuộn đến #section, tôi chỉ thấy đầu tiên div và nếu tôi cuộn xuống, hoạt ảnh sẽ chuyển đến phần khác, bỏ qua 2 và 3 div. Tôi tạo ra minh hoạ đơn giản.

div 2 và div 3 có màu xám để hiển thị, rằng những div đó sẽ bị bỏ qua trong khi hoạt ảnh.

Câu hỏi của tôi là, tôi có thể thực hiện các thiết lập trên fullpage.js hoặc thực hiện một số chỉnh sửa không, do đó, tập lệnh sẽ hiển thị các div đó, sau khi cuộn xuống?

Cảm ơn.

Answer 1

Tôi khuyến khích bạn sử dụng một số tùy chọn responsiveWidth hoặc responsiveHeight để tắt tính năng tự động quét trên thiết bị màn hình nhỏ.

Do đó, bạn có thể có một cái gì đó như thế này:

$('#fullpage').fullpage({ 
    responsiveWidth: 758 
}); 

Example online

Answer 2

scrollOverflow: true sẽ giúp bạn di chuyển trong mỗi phần trang đầy đủ.

séc jsfiddle Code for ScrollOverflow

$('#fullpage').fullpage({ 
       sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
       scrollOverflow: true 
});