使用两个 div 水平滚动答案

【问题标题】：Horizontal Scrolling With two divs使用两个 div 水平滚动
【发布时间】：2014-10-05 20:32:53
【问题描述】：

我想要做的是在两个方向上滚动我的网页，即 leftPanel 在从左到右的方向，而 rightPanel 在从右到左的方向，但标题保持固定在其位置。但我被困在某个地方。

这是我的代码：

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;
}

请看图片以获得进一步的解释：

在页面加载滚动将位于中心，并且两个 div 相应地定位，当我向上滚动时，leftPanel 从左到右滚动，当我向下滚动时，它的 rightPanel 从右到左移动。我该怎么办？？

【问题讨论】：

标签： html css

【解决方案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

【讨论】：

感谢您的努力，但我想要的是两个面板的单个水平滚动，并且在页面加载时它保持在中心，然后用户可以向左或向右滚动。

【解决方案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

【讨论】：