如何仅使用javascript (不使用jquery)使html图像在滚动条上淡入？

要实现在滚动条上淡入HTML图像，可以使用JavaScript来操作DOM元素和CSS属性。以下是一个基本的实现步骤：

1. 首先，在HTML中创建一个包含图像的元素，例如<img>标签，并为其设置一个唯一的ID，例如<img id="myImage" src="image.jpg">。
2. 在JavaScript中，使用document.getElementById()方法获取图像元素的引用，并将其存储在一个变量中，例如var image = document.getElementById("myImage");。
3. 使用CSS将图像元素的透明度设置为0，以实现淡入效果。可以通过设置image.style.opacity属性来实现，例如image.style.opacity = 0;。
4. 监听滚动事件，当滚动条滚动时触发相应的函数。
5. 在滚动事件处理函数中，获取滚动条的滚动位置，可以使用window.pageYOffset属性来获取当前滚动位置。
6. 计算图像元素距离顶部的距离，可以使用image.offsetTop属性来获取。
7. 比较滚动位置和图像元素距离顶部的距离，如果滚动位置大于等于图像元素距离顶部的距离，则表示图像已经进入可视区域，执行淡入效果。
8. 在淡入效果中，使用setInterval()函数和透明度的增加来实现渐变效果。例如，可以设置一个计时器，每隔一段时间增加图像元素的透明度，直到透明度达到1为止。

下面是一个示例代码：

// 获取图像元素的引用
var image = document.getElementById("myImage");

// 将图像元素的透明度设置为0
image.style.opacity = 0;

// 监听滚动事件
window.addEventListener("scroll", function() {
  // 获取滚动位置
  var scrollPosition = window.pageYOffset;
  
  // 获取图像元素距离顶部的距离
  var imageOffset = image.offsetTop;
  
  // 判断是否进入可视区域
  if (scrollPosition >= imageOffset) {
    // 设置计时器，每隔一段时间增加透明度
    var timer = setInterval(function() {
      // 增加透明度
      image.style.opacity = parseFloat(image.style.opacity) + 0.1;
      
      // 判断透明度是否达到1
      if (parseFloat(image.style.opacity) >= 1) {
        // 清除计时器
        clearInterval(timer);
      }
    }, 100);
  }
});

这样，当滚动条滚动时，图像将会在滚动条上淡入显示。

请注意，以上代码仅为示例，实际应用中可能需要根据具体需求进行修改和优化。