Question

当用户激活鼠标滚轮时，我的脚本从其他html页面加载数据。

它应该像这样工作。向上滚动，将range(mtcars$hp) [1] 52 300 range(mtcars$disp) [1] 71.1 450.0加载到contact.html中，再次向上滚动，将home.html加载到legal.html中。但是现在它仅加载一次，因为鼠标滚轮事件监听器仅工作一次。

在将新页面加载到home.html之后，如何使脚本再次侦听鼠标滚轮？

javascript

home.html

wheel_listener.js

$(document).ready(function() {
   bind_events();
   $(window).resize(function() {
      adjust_div_height();
   });
   adjust_div_height();
});

function bind_events() {
   var elem = $('.div-scrollable')[0];
   hammertime = new Hammer(elem);
   hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL 
});

hammertime.on("swipeup", function(ev) {
   load_page('next');
   adjust_div_height();
});

hammertime.on("swipedown", function(ev) {
    load_page('previous');
    adjust_div_height();
});

addWheelListener(elem, function(e) {
    var scrollUp = e.deltaY > 0;
    var scrollDown = e.deltaY < 0;

    if (scrollUp) {
        load_page('next');
    } else if (scrollDown) {
        load_page('previous');
    }
  });
}

function load_page(page_to_load) {
   // load contact page data
   var loadContactPage = $('#loaded_content').load('contact.html #contact');
   var loadHomePage = $('#loaded_content').load('home.html #home');
   var homeIsCurrentPage = "$('#home').length)";
   var contactIsCurrentPage = "$('#contact').length)";
   var legalIsCurrentPage = "$('#contact').length)";

   if (homeIsCurrentPage) {
      var next = loadContactPage;
      update_url('contact.html'); 
      console.log('contact page was loaded!');
   } 

   if (contactIsCurrentPage) {
      var next = loadLegalPage;
      update_url('legal.html'); 
      console.log('legal page was loaded!');
   } 

   if (legalIsCurrentPage) {
      var previous = loadContactPage;
      update_url('contact.html'); 
      console.log('contact page was loaded!');
   }

Answer 1

我能理解您在代码上尝试的内容。

快速注释一下，您的代码对我而言并不透明。所以，我无法模拟

addWheelListener函数已定义但未使用。我认为您忘了张贴它。
adjust_div_height函数已使用但未定义。
与update_url，loadContactPage和loadLegalPage相同。

我尝试在Code Snippet上投放尽可能多的东西，如下所示。

请检查并让我知道是否需要更多帮助。

谢谢

$(document).ready(function () {
  bind_events();
  $(window).resize(function () {
    adjust_div_height();
  });
  adjust_div_height();
});

function bind_events() {
  var elem = $('.div-scrollable')[0];

  hammertime = new Hammer(elem);
  hammertime.get('swipe').set({
    direction: Hammer.DIRECTION_VERTICAL
  });

  hammertime.on("swipeup", function (ev) {
    load_page('next');
    adjust_div_height();
  });

  hammertime.on("swipedown", function (ev) {
    load_page('previous');
    adjust_div_height();
  });

  addWheelListener(elem, function (e) {
    var scrollUp = e.deltaY > 0;
    var scrollDown = e.deltaY < 0;

    if (scrollUp) {
      load_page('next');
    } else if (scrollDown) {
      load_page('previous');
    }
  });
}

function adjust_div_height() {
  console.log('Adjust Div height function should be here.');
}

function addWheelListener(elem, callback) {
  elem.addEventListener("wheel", callback);
}

function update_url(url) {
  console.log('Update url to <' + url + '>');
}

function load_page(page_to_load) {
  console.log('Scrolled to <' + page_to_load + '> page!');
  
  // load contact page data
  var loadContactPage = $('#loaded_content').load('contact.html #contact');
  var loadHomePage = $('#loaded_content').load('home.html #home');
  var homeIsCurrentPage = "$('#home').length)";
  var contactIsCurrentPage = "$('#contact').length)";
  var legalIsCurrentPage = "$('#contact').length)";

  if (homeIsCurrentPage) {
    var next = loadContactPage;
    update_url('contact.html');
    console.log('contact page was loaded!');
  }

  if (contactIsCurrentPage) {
    var next = loadLegalPage;
    update_url('legal.html');
    console.log('legal page was loaded!');
  }

  if (legalIsCurrentPage) {
    var previous = loadContactPage;
    update_url('contact.html');
    console.log('contact page was loaded!');
  }
}

function loadContactPage() { /* Load Contact Page */ }
function loadLegalPage() { /* Load Legal Page */ }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
</head>
<body>
  <div id="home">Home</div>
  <div class="div-scrollable" style="height: 200px; background: red;">
    This is scrollable Div
  </div>
</body>
</html>

如何多次运行mousewheel事件侦听器？

1 个答案: