每次激活鼠标滚轮时如何更改颜色？答案

【问题标题】：How to change color each time mousewheel is activated?每次激活鼠标滚轮时如何更改颜色？
【发布时间】：2018-09-28 18:24:48
【问题描述】：

我正在尝试在鼠标滚轮向上滚动时更改文本的颜色。我想在第一次滚动时将其更改为红色，然后在第二次滚动时将其更改为蓝色。我所拥有的不起作用，但希望你能看到我的逻辑。

   $('#content').bind('mousewheel',function(event) {
        var scroll_up   = event.originalEvent.deltaY > 120;
        var red         = $('#content').css('color', 'red');
        var blue        = $('#content').css('color', 'blue');

        if(scroll_up) {
            console.log('you scrolled up!');
            //change color to red
            red;
        }
        if(red && scroll_up){
            console.log('you scrolled up again!');
            //change color to blue
            blue;
        }
    });

【问题讨论】：

` var red = $('#content').css('color', 'red'); var blue = $('#content').css('color', 'blue');` 您已经将颜色分配给#content，当您检查滚动条件时，您没有更改#content 中的属性
使用the scroll event

标签： javascript jquery mousewheel

【解决方案1】：

您需要像这样更改您的代码：

$('#content').bind('mousewheel',function(event) {
        var scroll_up   = event.originalEvent.deltaY > 120;


        if(scroll_up) {
            console.log('you scrolled up!');
            //change color to red

            changeColor(red);
        }
        if(red && scroll_up){
            console.log('you scrolled up again!');
            //change color to blue
            changeColor(blue);
        }
    });

function changeColor(color){

    $('#content').css('color', color);
}

*我没有测试过代码，但它应该可以按预期工作。

您的代码不起作用，因为您在满足条件之前已经分配了颜色，所以最后一种颜色是您唯一看到的颜色。

【讨论】：

建议使用 Wheel 事件而不是 MouseWheel。 MouseWheel 不是标准赛道活动。

【解决方案2】：

$('#content').bind('mousewheel', function(event) {
    var content = $('#content');
    var scrollUp = (event.originalEvent.deltaY / 120 > 0);
    if (scrollUp) {
        var isRed = (content.css('color') == 'rgb(255, 0, 0)');

        console.log('you scrolled up!');

        if (isRed) {
            content.css('color', 'rgb(0, 0, 255)');
        } else {
            content.css('color', 'rgb(255, 0, 0)');
        }
    }
});

【讨论】：