关于横向滚动问题

网站元素在不设置高度时,可以根据内容自动撑开,通过鼠标滑轮可以滚动,但是反过来横向显示内容时,通过鼠标滑轮无法滚动,必须点击滚动条才能实现横向滚动。代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box
        }
        
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0
        }
        
        .wrap {
            width: 4000px;
            height: 100%
        }
        
        .wrap .m {
            width: 200px;
            height: 200px;
            margin-top: 200px;
            display: inline-block;
            margin-right: 10px;
            background: blue
        }

    </style>

</head>

<body>
   <div class="wrap">
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
        <div class="m"></div>
    </div>
</body>

</html>

因为body有默认宽度,所以设置wrap宽度为4000px,怎样才能通过滑轮就可以实现滚动,无需点击下方滚动条,是不是必须通过js实现。

阅读 6.7k
3 个回答
var dbody=document.getElementsByClassName('wrap')[0];
//ff用
objAddEvent(document,'DOMMouseScroll', function(e){return mouse_scroll(e);})
  
//非ff chrome 用
objAddEvent(document,'mousewheel', function(e){return mouse_scroll(e);})
  
//chrome用
objAddEvent(dbody,'mousewheel', function(e){return mouse_scroll(e);})
function mouse_scroll(e){
e=e || window.event;
var delD=e.wheelDelta?e.wheelDelta: -e.detail*40;//判断上下方向
var move_s=delD>0?-50:50;
document.documentElement.scrollLeft+=move_s; //非chrome浏览器用这个
//chrome浏览器用这个
if(document.documentElement.scrollLeft==0)document.body.scrollLeft+=move_s;
  
return false;
}
//这个是给对象增加监控方法的函数
function objAddEvent(oEle, sEventName, fnHandler)
{
if(oEle.attachEvent) oEle.attachEvent('on'+sEventName, fnHandler);
else oEle.addEventListener(sEventName, fnHandler, false);
}

需要使用JavsScript或jQuery。

横向滚动 用鼠标滑轮的话要用js来控制

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题