Html 带两个div的水平滚动_Html_Css

Html 带两个div的水平滚动

html css

Html 带两个div的水平滚动,html,css,Html,Css,我想做的是在两个方向上滚动我的网页，即leftPanel在从左到右的方向上滚动，而rightPanel在从右到左的方向上滚动，但是页眉在其位置上保持不变。但我被困在某个地方这是我的密码： HTML文件- 请看图片进一步解释：在页面加载时，滚动将位于中心，两个div相应地定位，当我向上滚动leftPanel时，从左向右滚动，当我向下滚动其rightPanel时，从右向左移动。我该怎么办呢？您所做的事情很难实现，因为可滚动的div必须有一个已知的宽度，否则很难控制换行以使其对您有利，但如果您

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

这是我的密码： HTML文件- 请看图片进一步解释：

在页面加载时，滚动将位于中心，两个div相应地定位，当我向上滚动leftPanel时，从左向右滚动，当我向下滚动其rightPanel时，从右向左移动。

我该怎么办呢？

您所做的事情很难实现，因为可滚动的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;
}

我做了一些研究，通过添加一点jquery实现了这一点

我的代码是：

index.html 这里是小提琴：

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

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

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

<!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>

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;

}