使用纯JavaScript

Question

我有一个元素，应该根据文档属性调整宽度+高度。每当用户在窗口内滚动时我都需要调整大小。

是否有可能将事件绑定到此特定对象？

＆＃13;

＆＃13;

var instance = (function() {
  var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth || 0,
    y = w.innerHeight || e.clientHeight || g.clientHeight || 0,
    z = Math.max(g.scrollHeight || 0, e.scrollHeight || 0, g.offsetHeight || 0, e.offsetHeight || 0, g.clientHeight || 0, e.clientHeight || 0);

  // private
  function getMeById(id) {
    return d.getElementById(id);
  };

  // public
  return {
    updateContainer: function(id) {
      console.log('updateContainer');
      var container = getMeById(id);
      container.style.position = 'absolute';
      container.style.width = x + 'px';
      container.style.minHeight = z + 'px';
    },
    bindScroll: function() {
      w.addEventListener('scroll', updateContainer(), false);
    }
  };

})();
instance.updateContainer("test");

/* @TODO: Bind events to object
  w.addEventListener('resize', () => {
    console.log('resize');
    var container = getMeById("test");
    updateContainer(container);
  }, true);

  w.addEventListener('scroll', () => {
    console.log('scroll');
    var container = getMeById("test");
    updateContainer(container);
  }, true);
  */

＆＃13;

<div id="test"></div>

＆＃13;

＆＃13;

＆＃13;

正如您从＆＃34; bindScroll（）＆＃34; -function中看到的那样，现在没有任何意义。 反正有没有完成任务？

提前感谢您的帮助。

Answer 1

您可以通过将id绑定到updateContainer将id传递给eventListener回调：

updateContainer: function(id) {
  console.log('updateContainer');
  var container = getMeById(id);
  container.style.position = 'absolute';
  container.style.width = x + 'px';
  container.style.minHeight = z + 'px';
},
bindScroll: function(id) {
  window.addEventListener('scroll', this.updateContainer.bind(this,id), false);
}

所以可以这样做：

instance.bindScroll("testcontainer");

注意：x和z不是 live ，因此您可以重新加载值...

如果添加越来越多的功能，您的代码可能难以管理。您可以使用继承和构造函数：

function instance(id){
 this.el=document.querySelector(id);
}
instance.prototype={
 bindScroll:function(){
  window.addEventListener("scroll",this.update.bind(this),false);
  return this;
  },
  update: function() {
  var container = this.el;
  container.style.position = 'absolute';
  container.style.width = x + 'px';
  container.style.minHeight = z + 'px';
  return this;
}
};

所以你可以这样做：

var test=new instance("#test")
test.update().bindScroll();