这是我的代码：

HTML文件 -

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page </title>
        <link rel='stylesheet' href='css/default.css'>
    </head>
    <body class='aboutUsBody'>
        <div id='header'></div>
        <div id='mainPanel'>
            <div id='leftPanel'></div>
            <div id='rightPanel'></div>
        </div>

    </body>
</html>

CSS文件 -

html{

    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    margin: 0px;
}
#header{
    width: 100%;
    height: 10%;
    background: #bad960;
}

#mainPanel{
    height: 90%;
    display: inline;
    overflow-y: scroll;
}
#leftPanel{
    float: left;
    margin-left: -200px;
    display: inline;
    position: relative;
    width:100 %;
    height: 100%;
    background: red;
}
#rightPanel{
    display: inline-block;
    position: relative;
    width:100%;
    height: 100%;
    background: black;
}

请查看图片以进一步解释：

enter image description here

页面加载滚动将位于中心，两个div相应定位，当我向上滚动左侧滚动从左向右滚动时，当我向下滚动时，右侧滚动从右向左移动。我该怎么办？

Answer 1

你正在做的事很难实现，因为可滚动的div必须具有已知的宽度，否则很难控制换行以对你有利，但如果你有一个相当静态的设计来瞄准它可以很好地工作。

你的代码中有很多奇怪的东西似乎没有做任何有用的事情，但这可能是因为我误解了你的目标，而且，一些javascript可能对此至关重要，至少要让左侧面板一直向右滚动。

这是我正在尝试做的事情的工作css：

html{

    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    margin: 0px;
}
#header{
    width: 100%;
    height: 10%;
    background: #bad960;
}

#mainPanel{
    height: 90%;
}
#leftPanel{
float: left;
    width:50%;
    height: 100%;
    background: red;
    overflow-x: auto;
}
#rightPanel{
    float: left;
    color: red;
    width:50%;
    height: 100%;
    background: black;
    overflow-x: auto;
}
.horizScroll{
    width: 800px;    
}
#leftPanel .horizScroll{
    direction: rtl;
}

和jsfiddle

Answer 2

我做了一些研究，并通过添加一点jquery来实现它。

我的代码是：

的index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page </title>
        <link rel='stylesheet' href='css/default.css'>
        <script src="./jQuery.1.10.0.js"></script>
        <script>
        $(document).ready(function(){
            $("#mainPanel").scrollLeft(document.body.clientWidth*0.25);
            $(window).bind('mousewheel DOMMouseScroll', function(event){
            if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {

            }
            else {

            }
});
        });
        </script>
    </head>
    <body class='aboutUsBody'>
        <div id='header'></div>
        <div id='mainPanel'>
            <div id='panelOne' class='panel'></div>
            <div id='panelTwo' class='panel'></div>
        </div>  
    </body>
</html>

CSS文件

html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    margin: 0px;
}
#header{
    width: 100%;
    height: 10%;
    background: #bad960;
    position: fixed;
}

#mainPanel{
    top:10%;
    position: relative;
    width:100%;
    height: 90%;
    overflow-x:scroll;
    display: block;
    background: yellow;

}
#panelOne{
    position: absolute;
    display: inline;
    width: 1000px;
    height: 100%;
    background: red;

}
#panelTwo{
    position: absolute;
    display: inline;
    margin-left: 1000px;
    width: 1000px;
    height: 100%;
    background: aqua;

}

这里是小提琴： JSFiddle

水平滚动有两个div