使用鼠标拖拽div，实现横向滚动_ROVAST的博客

相关文章推荐

痴情的帽子 · 添加json格式字段 - CSDN文库· 2 月前 ·

重感情的羊肉串 · 运维日记|Oracle之如何正确比大小_字符串· 3 月前 ·

大力的红茶 · 如何在SQLite中使用独立条件更新多行数据？· 6 月前 ·

谈吐大方的茄子 · openssh ...· 1 年前 ·

痴情的油条 · node是后端服务器上js的运行时(runt ...· 1 年前 ·

< meta charset = "utf-8" /> < title > </ title > < script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type = "text/javascript" charset = "utf-8" > </ script > </ head > < div id = "pic" style = "width:10000px;height:300px;font-size:100px;" > getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，因为拖拽后鼠标和拖拽对象的相对位置是不变的 </ div > < script type = "text/javascript" > var drag= function (obj) { obj.bind( "mousedown" ,start); function start (event) { if (event.button== 0 ){ //判断是否点击鼠标左键 gapX=event.clientX; startx = $(window).scrollLeft(); // scroll的初始位置 //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的 $(document).bind( "mousemove" ,move); //此处的$(document)可以改为obj $(document).bind( "mouseup" ,stop); return false ; //阻止默认事件或冒泡 function move (event) { var left = event.clientX-gapX; // 鼠标移动的相对距离 $(window).scrollLeft(startx - left ); return false ; //阻止默认事件或冒泡 function stop () { //解绑定，这一步很必要，前面有解释 $(document).unbind( "mousemove" ,move); $(document).unbind( "mouseup" ,stop); obj=$( "#pic" ); drag(obj); //传入的必须是jQuery对象，否则不能调用jQuery的自定义函数 </ script > </ body > </ html > 效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.bootcss.co

我们都知道，pc端的横向滚动条只能点击滚动条进行左右拖动，不能像移动端那样，直接在空白区域就可以左右拖动。在我的项目中，因为需求是将整个网站的滚动条全部隐藏了，所以就不能点击滚动条来拖动。效果图1：效果图2：效果图1代码： <!DOCTYPE html > < html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content=..

然后，在事件处理函数 `handleMouseWheel` 中，你可以获取到鼠标滚轮事件对象 `event`，并使用 `event.deltaX` 属性来获取滚轮的滚动距离。最后，你可以使用这个滚动距离来更新你的组件的状态，例如，对横向滚动位置进行偏移。 <template> < div v-on:mousewheel="handleMouseWheel" style="overflow-x: scroll;">  </ div > </template> <script> export default { data() { return { scrollX: 0 methods: { handleMouseWheel(event) { this.scrollX += event.deltaX </script> 这样，当用户在横向滚动时，就可以通过鼠标滚轮来控制组件的滚动位置了。