JS判断鼠标向上滚动还是向下滚动

可以通过监听`mousewheel`或`DOMMouseScroll`事件来判断鼠标滚轮的滚动方向，具体实现如下：

var lastScrollTop = 0;
window.addEventListener('mousewheel', function(event) {
  var delta = event.wheelDelta || -event.detail;
  var currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (delta > 0 && currentScrollTop < lastScrollTop) {
    console.log('向上滚动');
  } else if (delta < 0 && currentScrollTop > lastScrollTop) {
    console.log('向下滚动');
  }
  lastScrollTop = currentScrollTop;
});

在这个示例中，我们通过比较当前滚动位置与上一次滚动位置的大小关系，来判断鼠标滚轮的滚动方向。如果`delta`为正数且当前滚动位置小于上一次滚动位置，则说明鼠标向上滚动；如果`delta`为负数且当前滚动位置大于上一次滚动位置，则说明鼠标向下滚动。

相关问题

selenium模拟鼠标上下滚动

在Selenium中，可以使用execute_script方法来执行JavaScript代码来模拟鼠标上下滚动。以下是几种常见的方法：

1. 模拟鼠标滚轮滚动至底部：可以使用下面的代码实现：

js = "window.scrollTo(0, document.body.scrollHeight)"
driver.execute_script(js)

这段代码会将页面滚动至底部。

2. 模拟鼠标滚轮滚动至顶部：可以使用下面的代码实现：

js = "window.scrollTo(0, 0)"
driver.execute_script(js)

这段代码会将页面滚动至顶部。

3. 模拟鼠标滚轮滚动至具体位置：可以使用下面的代码实现：

driver.execute_script("window.scrollTo(x, y)")

将代码中的x和y替换为具体的像素值，即可将页面滚动至指定位置。

4. 模拟鼠标滚轮向上滚动或向下滚动指定像素：

js = "window.scrollBy(0, 500)"  # 向下滚动500个像素
js = "window.scrollBy(0, -500)"  # 向上滚动500个像素

将代码中的500替换为指定的像素值。

希望以上方法对您有帮助！

向上滚动鼠标滚轮，放大图片；向下滚动鼠标滚轮，缩小图片。（别用jQuery）

这种交互效果通常在网页设计中通过JavaScript事件监听和CSS样式控制来实现。当你需要调整图像大小时，可以遵循以下步骤：

1. 首先，在HTML中添加一个`<img>`元素，并给它一个id，方便后续操作：

<img id="image" src="your-image-source.jpg" alt="Image">

2. 使用JavaScript添加滚动事件监听器到窗口对象，当用户滚动鼠标滚轮时触发：

window.addEventListener('wheel', handleScroll, { passive: true }); // 允许默认的滚动行为
function handleScroll(event) {

3. 在`handleScroll`函数中，获取当前滚轮偏移量（deltaY），并基于此调整图像的缩放比例：

const img = document.getElementById('image');
let scale = 1; // 初始缩放比例为1

if (event.deltaY > 0) { // 如果向上滚动
    scale += 0.1; // 缩小图片
} else if (event.deltaY < 0) { // 如果向下滚动
    scale -= 0.1; // 放大图片
}

// 更新图片的宽度和高度
img.style.transform = `scale(${scale})`;
}

4. 当然，为了防止图片尺寸过大导致显示异常，你可以在调整缩放比例时添加一些限制，比如设置最大和最小的缩放范围。

注意：上述示例假设浏览器支持`transform`属性的`scale()`方法。如果考虑到兼容性问题，你可能还需要检查浏览器是否支持并做相应处理。