Question

如何在此网站上添加水平滚动条，但不能进行Shift +滚动或滑动触摸板滚动条

完整的网站代码可在以下位置找到 https://github.com/itskhagendra/NYX

可以在以下位置查看网站 https://itskhagendra.github.io/NYX/

我尝试使用香草javascript

var item = document.getElementsByTagName('MAIN')[0];
        window.addEventListener('wheel',function(e){
            if(e.deltaY>0)
            { item.scrollLeft +=1000;
            }
            else item.scrollLeft-=1000;
        })

是否可以通过编程方式按shift键，从而使滚动条表现出预期的效果

Answer 1

 
var body = document.body;
var html = document.documentElement;
var scrollSpeed = 35;

 document.body.onmousewheel = function(e){
  if(e.deltaY < 0){
    body.scrollLeft -= scrollSpeed;
    html.scrollLeft -= scrollSpeed;
  }else{
    body.scrollLeft += scrollSpeed;
    html.scrollLeft += scrollSpeed;
  }
}

#scroll{
	display: inline-flex;
}

Answer 2

首先，请确保您要使其可滚动的div足够宽，以便您可以滚动。

然后，您可以使用类似MouseWheel的库来检测滚动事件并返回要与scrollLeft一起使用的增量值。

鼠标滚轮库：https://github.com/jquery/jquery-mousewheel

该代码将是这样的：

$(function() {

   $('#scrollableDiv').mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

此解决方案需要jQuery。

如何为该网页添加基于鼠标的水平滚动？

2 个答案: