鼠标横线滚动

(function() {
var stepSize = 200, //每滚动一格鼠标,移动多少距离
    doc = document.documentElement,
    body = document.body,
    docWidth = doc.clientWidth,
    scrollLeft = -1,
    ready = false;


//添加鼠标滚轮事件
if (document.addEventListener) {
  document.addEventListener('mousewheel', scroll, false);
  document.addEventListener('DOMMouseScroll', scroll, false); //针对firefox
} else {
  document.attachEvent('onmousewheel',scroll) //针对老ie浏览器
}


//处理mousewheel事件的信息
function scroll (event) {
  //第一次滚动需要获取当前滚动位置
  if (!ready) {
    scrollLeft = doc.scrollLeft + body.scrollLeft;
    ready = true;
  }
  //firefox用detail反映滚动方向,而且方向和其他浏览器相反。其他浏览器用wheelDelta
  var direction = event.wheelDelta || -event.detail; 
  //保证滚动到头的时候不再调用update函数
  if (scrollLeft <= 0 && direction > 0) {
    return;
  }
  if (scrollLeft >= docWidth && direction < 0) {
    return;
  }
  //根据鼠标滚动的方向确定是往左还是往右移动
  var distance = direction > 0? -stepSize : stepSize;
  update(distance);
}


//滚动
function update (distance) {
  scrollLeft += distance;
  doc.scrollLeft = scrollLeft;
  body.scrollLeft = scrollLeft; //针对webkit浏览器

})();


html, body {
    height: 100%;
}




方法2 


html {overflow-y: hidden;}


<div style="width: 5000px;">test</div>

可以使用DOM操作和CSS样式设置来实现一个可以在页面上随意滚动的十字架,具体步骤如下: 1. 创建一个div元素,作为十字架的容器,设置其position为fixed,top和left为0,z-index为最高。 2. 在十字架容器内部,创建两个div元素,一个作为竖线,一个作为横线,设置它们的宽度和高度为1px,背景色为黑色。 3. 使用鼠标滚动事件监听,动态修改十字架容器的位置,使其跟随鼠标滚动。 下面是一个示例代码: ```html <div id="crosshair-container"> <div class="crosshair-line crosshair-vertical"></div> <div class="crosshair-line crosshair-horizontal"></div> </div> ``` ```css #crosshair-container { position: fixed; top: 0; left: 0; z-index: 9999; } .crosshair-line { position: absolute; background-color: black; } .crosshair-vertical { width: 1px; height: 100%; } .crosshair-horizontal { width: 100%; height: 1px; } ``` ```javascript var crosshairContainer = document.getElementById('crosshair-container'); var crosshairVertical = document.querySelector('.crosshair-vertical'); var crosshairHorizontal = document.querySelector('.crosshair-horizontal'); document.addEventListener('scroll', function(e) { crosshairContainer.style.top = window.scrollY + 'px'; crosshairContainer.style.left = window.scrollX + 'px'; }); ``` 这样,我们就可以在页面上随意滚动,而十字架会一直保持在页面上的固定位置。需要注意的是,为了让十字架容器始终保持在页面顶部,我们需要将其position设置为fixed,并且在滚动事件中动态修改其top和left属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值