鼠标滚轮滚动横向下拉框移动_removeclass(scroll)-优快云博客

本文链接：https://blog.youkuaiyun.com/wang_Fan1_1/article/details/115345791

本文介绍了如何在HTML中实现一个滚动横向下拉框，隐藏文本溢出且无滚动条显示。通过CSS设置元素样式，结合JavaScript监听滚轮事件来实现横向滚动。CSS中利用`overflow-x`和`white-space`属性隐藏滚动条并保持文本不换行，JS部分则针对Chrome浏览器处理滚轮事件，使内容横向平移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标滚轮滚动横向下拉框移动

当文本过长溢出时，想要将溢出的文本隐藏起来但仍然可以滚动查看文本，但不需要显示滚动条时可以使用以下方法

html代码

<div>
<span>超长文本超长文本超长文本</span>
</div>

css样式

span{
	display: block;/*flex等*/
    width: 100px;
    white-space: nowrap;/*文本显示在一行不换行*/
    overflow-x: auto;
    overflow-y: hidden;/*有的文本会因为高度设置有竖向滚动条，将其隐藏*/
}
/*隐藏滚动条 但仍能滚动 overflow需设置为auto或scoll*/
::-webkit-scrollbar {
    display: none;/*或width:0px;*/
}

以上，页面显示效果就有了

js代码

如果span便签已经写在html页面里可以直接在js下写该段代码

$("span").bind('mousewheel DOMMouseScroll',function(event){ //on也可以 bind监听
		let scrollText = $(this).children()
		$(this).addClass("scrollmove");
		//Chorme 浏览器滚轮事件
		var wheel = event.originalEvent.wheelDelta;
		var scroll_width = 100;
		if (event.originalEvent.wheelDelta) { //判断浏览器IE,谷歌滚轮事件
			if (wheel > 0) { //当滑轮向上滚动时
				//alert('上滚');
				$(".scrollmove").scrollLeft($(".scrollmove").scrollLeft() - scroll_width);
				$(this).removeClass("scrollmove");
			}
			if (wheel < 0) { //当滑轮向下滚动时
				//alert('下滚');
				$(".scrollmove").scrollLeft($(".scrollmove").scrollLeft() + scroll_width);
				//window.getSelection("span").scrollLeft($("span").scrollLeft() + scroll_width);
				$(this).removeClass("scrollmove");
			}
		}
	});

如果span是动态生成的，那么需要在页面渲染完成之后在添加该段代码，将其封装为一个函数，然后在$(function(){}最后一行调用该函数

$(function(){
//你原来的js代码

//最后一行调用该函数
evenMouse();
}
//监听
function evenMouse(){
	$("span").bind('mousewheel',function(event){ //on也可以
		$(this).addClass("scrollmove");
		//谷歌浏览器滚轮事件
		var wheel = event.originalEvent.wheelDelta;//获取事件属性值
		var scroll_width = 100;
		if (event.originalEvent.wheelDelta) { //判断浏览器滚轮事件
			if (wheel > 0) { //当滑轮向上滚动时
				$(".scrollmove").scrollLeft($(".scrollmove").scrollLeft() - scroll_width);
				$(this).removeClass("scrollmove");
			}
			if (wheel < 0) { //当滑轮向下滚动时
				$(".scrollmove").scrollLeft($(".scrollmove").scrollLeft() + scroll_width);
				$(this).removeClass("scrollmove");
			}
		}
	});
}