Question

我正在使用PerfectScrollbar jQuery插件来处理一些溢出内容。 PerfectScrollbar与触摸设备不兼容，并且网站以较小的视口宽度布局，这无关紧要，因为我无论如何都禁用了该插件。

简而言之，我需要在用户调整浏览器窗口大小的情况下重新初始化插件。

这就是我如何正式启动插件......

var minWidth = 800

if ( $(window).width() >= minWidth){
  $('#tasting-menu').perfectScrollbar({
  includePadding: true,
  wheelPropagation: true
});

我正在尝试按照这种方式重新初始化，但这不对......

$(window.resize(function () {
if ( $(window).width() >= minWidth){
  $('#tasting-menu').perfectScrollbar({
    includePadding: true,
    wheelPropagation: true
    });
  }
});

我显然是jQuery的新手。这是否是正确的方法，我只是搞砸了语法，或者我只是完全走错了方向？

Answer 1

我认为语法错误导致您的代码无法触发。将您的代码更改为：

$(window).resize(function () {
if ( $(window).width() >= minWidth){
    $('#tasting-menu').perfectScrollbar({
        includePadding: true,
        wheelPropagation: true
    });
    }
});

Answer 2

我就是这样做的，我看到你可以通过＆＃34;更新＆＃34;当你调用perfectScrollbar所以你不需要再次调用初始化程序http://noraesae.github.io/perfect-scrollbar/。玩得开心，如果你想测试一下，别忘了在你的脚本列表中添加lo-dash：）

var initLayout, lazyLayout, minWidth;

minWidth = 800;

initLayout = function(options) {
  var currentWidth;
  if (options == null) {
    options = {
      includePadding: true,
      wheelPropagation: true
    };
  }
  currentWidth = $(window).width();
  if (currentWidth >= minWidth) {
    return $('#tasting-menu').perfectScrollbar(options);
  }
};

lazyLayout = _.debounce(function() {
  return initLayout('update');
}, 150);

$(window).on("resize", lazyLayout);

$(function() {
  return initLayout();
});

Answer 3

试试这个

$(window).on('resize', myFunctionName);

funtion myFunctionName(){
   if ( $(window).width() >= minWidth){
         $('#tasting-menu').perfectScrollbar({
         includePadding: true,
         wheelPropagation: true
       });
     }
}

Window Resize上的Retrigger jQuery插件？

3 个答案: