Trượt bố cục đáp ứng ngang và đầu vào MouseWheel

Tôi đang cố gắng triển khai bố cục ngang trượt ngang bằng biểu ngữ đầu trang.Trượt bố cục đáp ứng ngang và đầu vào MouseWheel

Đây là cấu trúc HTML:

<body> 
    <div id="header"> 
    <div><a href="#one"> one </a></div> 
    <div><a href="#two"> two </a></div> 
    <div><a href="#thr"> thr </a></div> 
    </div> 

    <div id="one" class="panel"> </div> 
    <div id="two" class="panel"> </div> 
    <div id="thr" class="panel"> </div> 
</body>

Tiêu đề là cố định, và tấm đã được cung cấp với một nền gradient (panel giữa có màu sắc khác nhau cho mục đích debug). Đây là CSS:

body { 
     width: 6000px; 
     overflow: hidden; 
    } 

    .panel { 
     width: 33.3%; 
     float: left; 
     padding-left: 30px; 
     padding-right: 1040px; 
     margin-top: -75px; 
     height: 960px; 
     background-image: linear-gradient(to bottom, #0B88FF, #95EEFF); 
    } 

    #header { 
     position: fixed; 
     height: 75px; 
     margin-top: 25px; 
    } 

    #two{ 
     background-image: linear-gradient(to bottom, #0B8800, #9E5EFF); 
    }

Và cuối cùng là chức năng mà quản lý các hình ảnh động giữa tấm:

$(document).ready(function() { 
    $("#header a").bind("click", function(event) { 
    event.preventDefault(); 
    var target = $(this).attr("href"); 
    $("html, body").stop().animate({ 
     scrollLeft: $(target).offset().left, 
     scrollTop: $(target).offset().top 
    }, 1200); 
    }); 
});

Những vấn đề tôi phải đối mặt như sau:

1) Tôi đã cố gắng để triển khai chức năng jQuery để chạy hoạt ảnh trang trình bày khi người dùng sử dụng bánh xe chuột, nhưng không có thử nghiệm nào của tôi hoạt động ... cấu trúc luôn giống nhau:

$(window).scroll(function() { 
     if ($(this).scrollTop() > 0) { 
     var target // still not able to figure out who should i target 
     $("html, body").stop().animate({ 
      //to the target >,< 
     } 
});

2) Khi cửa sổ trình duyệt của tôi là 100% kích thước tất cả mọi thứ dường như làm việc tốt, nhưng nếu tôi giảm hoặc tăng zoom tất cả mọi thứ lộn xộn lên>, < tôi nhận thấy nó có thể xử lý việc này, và here is an example:

Nguồn

2016-02-23 Koop4

Để có được mục tiêu của bạn, bạn có thể chỉ cần điền vào một mảng witj phần tử với lớp panel và sau đó sử dụng chỉ mục để di chuyển qua các bảng.

Cuối cùng, nếu bạn có vấn đề với cuộn trên cửa sổ thay đổi kích cỡ, bạn có thể ràng buộc này event và làm bất cứ điều gì bạn muốn

Hãy xem MouseWheelEvent.

Và thử ví dụ này với mã của bạn:

$(document).ready(function() { 
 
    $("#header a").bind("click", function(event) { 
 
    event.preventDefault(); 
 
    var target = $(this).attr("href"); 
 
    $("html, body").stop().animate({ 
 
     scrollLeft: $(target).offset().left, 
 
     scrollTop: $(target).offset().top 
 
    }, 1200); 
 
    }); 
 
    
 
    var scroll_targets = $(".panel"); 
 
    var scroll_targets_index = 0; 
 
    $(window).on('DOMMouseScroll mousewheel', function (e) {  
 
    if (e.originalEvent.wheelDelta < 0) { 
 
     if(scroll_targets_index < scroll_targets.length-1){ 
 
     var where = ++scroll_targets_index; 
 
     $("html, body").stop().animate({ 
 
      scrollLeft: $(scroll_targets[where]).offset().left, 
 
      scrollTop: $(scroll_targets[where]).offset().top 
 
     }, 1200); 
 
     } 
 
    } 
 
    else { 
 
    \t var where; 
 
    \t if(scroll_targets_index > 0){ 
 
     \t where = --scroll_targets_index; 
 
     } 
 
     else{ 
 
     \t where = 0; 
 
     } 
 
     \t $("html, body").stop().animate({ 
 
      scrollLeft: $(scroll_targets[where]).offset().left, 
 
      scrollTop: $(scroll_targets[where]).offset().top 
 
     }, 1200); 
 
     
 
    } 
 
    }); 
 
    
 
    $(window).resize(function() { 
 
    $('html,body').scrollTop($(scroll_targets[where]).offset().top); 
 
    $('html,body').scrollLeft($(scroll_targets[where]).offset().left); 
 
    }); 
 
});

#body { 
 
     width: 6000px; 
 
     overflow: hidden; 
 
    } 
 

 
    .panel { 
 
     width: 33.3%; 
 
     float: left; 
 
     padding-left: 30px; 
 
     padding-right: 1040px; 
 
     margin-top: -75px; 
 
     height: 960px; 
 
     background-image: linear-gradient(to bottom, #0B88FF, #95EEFF); 
 
    } 
 

 
    #header { 
 
     position: fixed; 
 
     height: 75px; 
 
     margin-top: 25px; 
 
    } 
 

 
    #two{ 
 
     background-image: linear-gradient(to bottom, #0B8800, #9E5EFF); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body"> 
 
    <div id="header"> 
 
    <div><a href="#one"> one </a></div> 
 
    <div><a href="#two"> two </a></div> 
 
    <div><a href="#thr"> thr </a></div> 
 
    </div> 
 

 
    <div id="one" class="panel"> </div> 
 
    <div id="two" class="panel"> </div> 
 
    <div id="thr" class="panel"> </div> 
 
</div>

Nguồn

2016-03-02 12:22:48 jolmos

Trong sáng tỏ, tôi nghĩ rằng điều này đã được thực hiện với CSS và JavaScript sử dụng transform3d và một số thủ thuật css khác. Nếu bạn muốn nhận được sự kiện cuộn, nó sẽ không xảy ra trong khi bạn có tràn: ẩn trên cơ thể, bởi vì bạn chỉ cần nói với trình duyệt để ẩn tất cả các cuộn của nó! Vì vậy, những gì tôi đã cố gắng để làm gì để giải quyết vấn đề bạn đang gặp bây giờ, là sử dụng các sự kiện xoay chuột, có vai trò như thế này:

$(window).on('wheel', function (event) {  
    console.log(event); // Here you can see all of its events properties and functions in the console 
});

Có một tài sản wheelDelta trả về 120 nếu bạn đang làm một mousewheel về phía trước hoặc -120 khi thực hiện một mousewheel lạc hậu, vì vậy tôi kèm theo một bộ đếm để tôi có thể biết có bao nhiêu lần so với sự kiện mousewheel kích hoạt:

$(window).on('wheel', function (event) {  

    if (event.originalEvent.wheelDelta/120 > 0) { 
     count++; 
     console.log(count) ; 
     if(count > 30){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#two').offset().left, 
       scrollTop: $('#two').offset().top 
      }, 1200); 
     } 
     if(count > 60){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#thr').offset().left, 
       scrollTop: $('#thr').offset().top 
      }, 1200);    
     } 
     if(count > 90){ 

      $("html, body").stop().animate({ 
       scrollLeft: $('#two').offset().left, 
       scrollTop: $('#two').offset().top 
      }, 1200); 
      count = 0;   
     } 


    } 
});

này chỉ dành cho bạn để tiếp tục tạo ra logic để xây dựng khi mousewheel sẽ thay đổi thành một bảng điều khiển khác và như vậy, chúc may mắn!

Nguồn

2016-03-06 07:24:53 Leo

Trượt bố cục đáp ứng ngang và đầu vào MouseWheel

Trả lời

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