滑动水平响应式布局和鼠标滚轮输入答案

【问题标题】：Sliding Horizontal responsive Layout and MouseWheel input滑动水平响应式布局和鼠标滚轮输入
【发布时间】：2016-06-05 00:23:43
【问题描述】：

我正在尝试实现带有标题横幅的水平滑动布局。

这是 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>

标题是固定的，面板提供了渐变背景（中间面板具有不同的颜色用于调试目的）。这是 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);
    }

最后是管理面板间动画的函数：

$(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);
  });
});

我面临的问题如下：

1) 我尝试实现一个 jQuery 函数来在用户使用鼠标滚轮时运行幻灯片动画，但是我的测试都没有工作...结构始终相同：

$(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) 当我的浏览器窗口大小为 100% 时，一切似乎都运行良好，但如果我减小或增加缩放比例，一切都会变得混乱 >,here is an example:

【问题讨论】：

标签： jquery css layout

【解决方案1】：

要获得您的目标，您只需使用 panel 类填充一个数组，然后使用索引在面板中移动。

最后，如果你在调整窗口大小时遇到滚动问题，你可以绑定这个event 并做任何你想做的事情

看看MouseWheelEvent。

用你的代码试试这个例子：

$(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 {
    	var where;
    	if(scroll_targets_index > 0){
      	 where = --scroll_targets_index;
      }
      else{
      	where = 0;
      }
      	$("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>

【讨论】：

【解决方案2】：

在 Unravel 中，我认为这是使用 CSS 和 JavaScript 使用 transform3d 和其他一些 css 技巧制作的。如果你想获得滚动事件，当你在 body 上设置了 overflow:hidden 时它不会发生，因为你只是告诉浏览器隐藏它的所有滚动！所以，我试图解决你现在遇到的问题，就是使用鼠标滚轮事件，它的作用如下：

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

有一个 wheelDelta 属性，如果您正在向前执行鼠标滚轮，则返回 120，或者在向后执行鼠标滚轮时返回 -120，所以我附加了一个计数器，以便知道鼠标滚轮事件触发了多少次：

$(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;          
        }


    }
});

这只是为了让您在鼠标滚轮切换到另一个面板时继续创建构建逻辑等等，祝你好运！

【讨论】：