js 鼠标滚轮上下滑动

可以使用addEventListener()方法来监听鼠标滚轮事件，然后根据event对象中的deltaY属性来判断鼠标滚轮的方向。

示例代码：

document.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    // 鼠标向下滚动
    console.log('鼠标向下滚动');
  } else {
    // 鼠标向上滚动
    console.log('鼠标向上滚动');
  }
});

在上述代码中，我们监听了整个文档对象的wheel事件，当鼠标滚轮滚动时就会执行回调函数。在回调函数中，我们根据event对象中的deltaY属性来判断鼠标滚轮的方向，如果deltaY大于0，则表示鼠标向下滚动，反之则表示鼠标向上滚动。

相关问题

echarts柱状图轮播滚动且可暂停，鼠标滚轮上下滚动查看

您可以通过使用ECharts中的DataZoom组件来实现柱状图轮播滚动和可暂停，以及通过设置图表的可滚动性来实现鼠标滚轮上下滚动查看。

以下是一个示例代码，可以让您更好地理解如何实现这些功能：

option = {
    // 设置数据区域缩放组件
    dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        start: 0,
        end: 60, // 显示60个数据
        handleSize: 16,
        handleStyle: {
            color: '#ddd'
        },
        textStyle: {
            color: '#fff'
        },
        fillerColor: 'rgba(255,255,255,0.2)',
        borderColor: '#ddd'
    }, {
        type: 'inside',
        xAxisIndex: [0],
        start: 0,
        end: 60 // 显示60个数据
    }],
    // 设置柱状图
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        axisTick: {
            alignWithLabel: true
        },
        // 设置轴线样式
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    },
    yAxis: {
        type: 'value',
        // 设置轴线样式
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    },
    series: [{
        name: '柱状图',
        type: 'bar',
        data: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270],
        // 设置柱状图样式
        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                     '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                     '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                     '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                     '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'];
                    return colorList[params.dataIndex % colorList.length]
                }
            }
        }
    }]
};
// 设置定时器，让柱状图自动轮播
var currentIndex = -1;
var timeTicket = null;
var count = option.xAxis.data.length;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    // 设置数据区域缩放组件的起点和终点
    myChart.setOption({
        xAxis: {
            axisLabel: {
                show: true,
                interval: 0,
                rotate: 0
            },
            data: option.xAxis.data.slice(currentIndex, currentIndex + count)
        },
        dataZoom: [{
            start: currentIndex / dataLen * 100,
            end: (currentIndex + count) / dataLen * 100
        }, {
            start: currentIndex / dataLen * 100,
            end: (currentIndex + count) / dataLen * 100
        }]
    });
}, 1000);

// 设置鼠标滚轮上下滚动查看
var zoomSize = 6;
myChart.on('mousewheel', function(params) {
    var option = myChart.getOption();
    var axis = option.xAxis[0];
    var dataLen = axis.data.length;
    var start = axis.dataZoom[0].start;
    var end = axis.dataZoom[0].end;
    var maxSpan = 100;
    var zoom = Math.ceil((end - start) / dataLen * (dataLen - 1));
    if (params.wheelDelta > 0) {
        start = Math.max(0, start - zoom);
        end = Math.min(dataLen - 1, end + zoom);
    } else {
        var center = (start + end) / 2;
        start = Math.max(0, Math.floor(center - zoom / 2));
        end = Math.min(dataLen - 1, start + zoom - 1);
    }
    var span = end - start;
    if (span > maxSpan) {
        var extra = span - maxSpan;
        start += extra / 2;
        end -= extra / 2;
    }
    myChart.setOption({
        xAxis: {
            axisLabel: {
                show: true,
                interval: 0,
                rotate: 0
            },
            data: axis.data.slice(start, end + 1)
        },
        dataZoom: [{
            start: start / dataLen * 100,
            end: end / dataLen * 100
        }, {
            start: start / dataLen * 100,
            end: end / dataLen * 100
        }]
    });
});

在上面的代码中，我们首先通过设置`dataZoom`组件来实现柱状图的轮播和暂停功能。其中，`start`和`end`表示数据区域缩放组件的起点和终点，可以通过设置这两个属性来控制显示的数据量。通过定时器，我们可以控制柱状图每隔一段时间自动轮播一次。在鼠标滚轮上下滚动时，我们通过`mousewheel`事件来控制显示的数据量，从而实现了滚轮上下滚动查看的功能。

js 鼠标滚轮横向拖动

在JavaScript中，鼠标滚轮的横向拖动通常用于实现类似分页或滑动查看的效果，特别是在处理表格、网格或其他需要水平滚动内容的场景。你可以通过监听`wheel`事件并在处理函数中获取滚轮的偏移量来实现这个功能。以下是一个简单的示例：

// 获取需要响应滚动的元素
const container = document.getElementById('your-container');

container.addEventListener('mousewheel', function(event) {
    // 阻止默认滚轮滚动行为，避免页面上下滚动
    event.preventDefault();

    // 获取滚轮的垂直和水平偏移
    const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    const xDelta = event.deltaX || event.wheelDeltaY; // 取横向偏移

    // 根据偏移调整容器的scrollLeft属性，实现横向移动
    if (xDelta !== undefined && !isNaN(xDelta)) {
        container.scrollLeft += xDelta;
    }
});

在这个例子中，你需要替换`'your-container'`为实际的目标元素ID，并根据需要调整滚动距离计算逻辑。