屏幕（视口）上的附加和解除附加javascript函数实时调整大小

我的下一个投资组合站点有一个工作示例：

我有一个图像调整脚本：

$(document).ready(function(){
if( $('body').hasClass('hor') && $(window).width() >= 500 ){ // Only run the script of Body.hor and viewport width less or equal to 500px -> document.documentElement.clientWidth >= 500
var atmeretezo = function () {
    var windowHeight = $(window).height() - 24; // Jquery measuring the window height (browser viewport)
    //var windowHeight = window.innerHeight - 17;
    var headerHeight = $('header').height(); // Header height
    var footerHeight = $('footer').height(); // Footer height
    var headerFooter = headerHeight + footerHeight;
    var imagesHeight = windowHeight - headerFooter; // Real time calculate the new image height

    $('body.hor .horgallery .images li img').height(imagesHeight); // This will trigger the upper calculation

$('body.hor .horgallery .images').css({ // This will put them in the middle of the available free space (if there's any)
    'line-height': windowHeight - headerFooter + 'px',
    'height': imagesHeight + 'px'
});

};
$(document).ready(atmeretezo); // Trigger calculation
$(window).resize(atmeretezo); // Trigger line-height
}
});

这个鼠标轮脚本：

$(document).ready(function(){
if( $('body').hasClass('hor')  && $(window).width() >= 500 ){

$(".horgallery").mousewheel(function(event, delta) {
  this.scrollLeft -= (delta * 75);
  event.preventDefault();
});

} });

在CSS中，我将布局从水平更改为垂直

请在窗口模式下，开始在浏览器窗口中水平移动。我的问题是，当您在500px屏幕宽度下和上方重新加载我的页面时，我想实时附加和解除附加具有相同功能的功能。但看起来有些东西是留在DOM中的

最简单的解决方案是只在body元素中添加和删除“hor”类，但我担心DOM不能这样工作

谢谢你的帮助

更新：

$(document).ready(function(){
var scroller = function () {
if ($(window).width() >= 900) {
    // Attach
    $(".horgallery").on('mousewheel', function(event, delta) {
      this.scrollLeft -= (delta * 75);
      event.preventDefault();
    });
}

if ($(window).width() < 900) {
    // Detach
    $(".horgallery").off('mousewheel');
}
};
$(document).ready(scroller);
$(window).resize(scroller);
});

我试图从正文中添加或删除hor类，但由于某些原因，此脚本无法工作：

$(window).resize(function() {
if ($(window).width() >= 500) {
    $('body').removeClass('hor');
}
if ($(window).width() < 500) {
    $('body').addClass('hor');
}
});

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>=500）{
$（'body'）.removeClass（'hor'）；
}
如果（$（窗口）.width（）<500）{
$（'body'）.addClass（'hor'）；
}
});

此脚本还破坏了在本机全屏上调整图像大小的功能。 另外，为什么不从“body”中删除“hor”类呢？

更新2:

$(document).ready(function(){
var scroller = function () {
if ($(window).width() >= 900) {
    // Attach
    $(".horgallery").on('mousewheel', function(event, delta) {
      this.scrollLeft -= (delta * 75);
      event.preventDefault();
    });
}

if ($(window).width() < 900) {
    // Detach
    $(".horgallery").off('mousewheel');
}
};
$(document).ready(scroller);
$(window).resize(scroller);
});

$（文档）.ready（函数（）{
var scroller=函数（）{
如果（$（窗口）.width（）>=900）{
//附加
$（“.horgallery”）.on（'mousewheel'，函数（事件，增量）{
这个.scrollLeft-=（增量*75）；
event.preventDefault（）；
});
}
如果（$（窗口）.width（）<900）{
//分离
$（“.horgallery”）.off（“鼠标滚轮”）；
}
};
$（文档）.ready（滚动条）；
$（窗口）。调整大小（滚动条）；
});

---

现在，我只使用鼠标滚轮和900px宽度来测试这一点。似乎有什么原因使滚动速度加倍。即使我只需触摸浏览器窗口的大小。

在jQuery中，您可以通过以下方式将侦听器附加/分离到元素：

// Attach
$(".horgallery").on('mousewheel', function(event, delta) {
  this.scrollLeft -= (delta * 75);
  event.preventDefault();
});

// Detach
$(".horgallery").off('mousewheel');

---

请参阅和

如果最简单的解决方案是从

中添加/删除

hor

类，并且既然您已经在使用jQuery，那么您不能使用和/或的一些组合吗？DOM允许在任何时候修改类。当我试图从正文中添加或删除hor类时，我用代码更新了我的问题，但由于某些原因，脚本无法工作。还破坏了本机全屏视图中的图像大小调整。我更新了我的问题。首先，我在鼠标滚轮上进行测试。它可以工作，但问题是不知何故，车轮的速度增加了一倍；进入函数，打开控制台检查是否调用了两次。我不知道javascript，但在控制台中的“test”单词前面有一个数字5、9、28。我的另一个问题是为什么addClass和removeClass不能在if（$（window）.width（）>=900）{下工作？