Question

正如标题所述，我试图让我的网站的一面滚动，另一面留下来。我找到了一个完全符合我想要的例子：

如果您在该网站上向下滚动一下，您会看到左侧带有“约”位置，而右侧带有文字将向下滚动向下滚动。有没有人知道如何做到这一点？

到目前为止，我只有两个相邻的div。

<section class="about">
<div class="aboutTitle">
    about
</div>

<div class="aboutText">
    <p style="font-size: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>

.aboutTitle {
display: table-cell;
background-color: red;
float: left;
width: 50%;
height: 100%;
}

.aboutText {
display: table-cell;
background-color: orange;
float: left;
width: 50%;
height: 100%;
}

编辑：

Sagar Kodte他的解决方案对我来说很好。我在原帖中没有包含的一件事，因为在这种情况下我认为不重要的是，我的“约”部分之上还有另一部分。

    <body>

<section class="home">
Welcome
</section>

<section class="about">
    <div class="aboutTitle">
        about
    </div>

    <div class="aboutText">
        <p style="font-size: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>

</body>

.home {
background-color: grey;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100vh;

}

一旦我删除了“home”部分，它就开始工作了。但是当然我仍然希望能够使用那个“家”部分。有没有人知道如何使用这两个部分仍然在一边使用滚动？

JSFiddle ：Link

Answer 1

要执行跟踪滚动条位置的高级效果，您需要jQuery。如果你想要一个没有这种效果的分割页面的简单版本，这里是：

让身体边缘等于零。然后，将页面分为2个div width: 50%; height: 100%，最后将overflow-y: scroll添加到第二个div。

- codepen

- jsfiddle

＆＃13;

body {
  width: 100%;
  height: 100vh;
  margin: 0px;
}

#a, #b {
  box-sizing: border-box;
  padding: 50px;
  display: inline-block;
  width: 50%;
  height: 100%;
  vertical-align: top;
}

#a {
  background: tomato;
}

#b {
  text-align: justify;
  background: honeydew;
  overflow-y: auto;
  overflow-x: hidden;
}

#aboutimg {
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: auto;
}

＆＃13;

<img src="http://i.imgur.com/q0NYMxY.png" alt=about id=aboutimg>
<div id=a><span style="font-size: 1.3em">About:</span></div><div id=b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.<br><br> 

Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.<br><br> 

Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.<br><br>

Fusce auctor, metus eu ultricies vulputate, sapien nibh faucibus ligula, eget sollicitudin augue risus et dolor. Aenean pellentesque, tortor in cursus mattis, ante diam malesuada ligula, ac vestibulum neque turpis ut enim. Cras ornare. Proin ac nisi. Praesent laoreet ante tempor urna. In imperdiet. Nam ut metus et orci fermentum nonummy. Cras vel nunc. Donec feugiat neque eget purus. Quisque rhoncus. Phasellus tempus massa aliquet urna. Integer fringilla quam eget dolor. Curabitur mattis. Aliquam ac lacus. In congue, odio ut tristique adipiscing, diam leo fermentum ipsum, nec sollicitudin dui quam et tortor. Proin id neque ac pede egestas lacinia. Curabitur non odio.<br><br> 

Nullam porta urna quis mauris. Aliquam erat volutpat. Donec scelerisque quam vitae est. Aenean vitae diam at erat pellentesque condimentum. Duis pulvinar nisl sed orci. Vivamus turpis nisi, volutpat in, placerat et, pharetra nec, eros. Suspendisse tellus metus, sodales non, venenatis a, ultrices auctor, erat. In ut leo nec elit mattis pellentesque. Sed eros elit, cursus accumsan, sollicitudin a, iaculis quis, diam. Pellentesque fermentum, pede a nonummy varius, ligula velit laoreet erat, et lacinia nibh nulla sit amet nunc. Suspendisse at turpis quis augue pellentesque pretium. Nunc condimentum elit semper felis.<br><br> 

Duis imperdiet diam pharetra nisi. Fusce accumsan. Fusce adipiscing, felis non ornare egestas, risus elit placerat mauris, in mollis ante erat quis nisi. Quisque sed ipsum. Nulla facilisi. Donec arcu erat, sodales quis, cursus eget, posuere eget, tellus. Vestibulum eu risus. Curabitur adipiscing, odio in pretium feugiat, nulla magna vehicula lorem, at placerat tortor nisl eget velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse mollis fermentum massa. </div>

＆＃13;

Answer 2

这是我对这个问题的第二个答案。目标是让鼠标滚动工作，即使鼠标在左框上方也是如此。与早期版本不同，右侧的内容div没有滚动条。其内容与页面滚动条一起滚动。为避免页面滚动条也到达第一个div，它设置为position:fixed

＆＃13;

body {
  width: 100%;
  height: 100vh;
  margin: 0px;
}

#a, #b {
  box-sizing: border-box;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-right: 50px;
  display: inline-block;  
  vertical-align: top;
}

#a {
  padding-left: 50px;
  height: 100%;
  position: fixed;
  background: tomato;
  width: 50%;
}

#b {
  padding-left: calc(50% + 50px);
  text-align: justify;
  background: honeydew;
  width: 100%;
}

#aboutimg {
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
z-index: 100;
}

＆＃13;

<img src="http://i.imgur.com/q0NYMxY.png" alt=about id=aboutimg>
<div id=a><span style="font-size: 1.3em">About:</span></div><div id=b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.<br><br> 

Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.<br><br> 

Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.<br><br>

Fusce auctor, metus eu ultricies vulputate, sapien nibh faucibus ligula, eget sollicitudin augue risus et dolor. Aenean pellentesque, tortor in cursus mattis, ante diam malesuada ligula, ac vestibulum neque turpis ut enim. Cras ornare. Proin ac nisi. Praesent laoreet ante tempor urna. In imperdiet. Nam ut metus et orci fermentum nonummy. Cras vel nunc. Donec feugiat neque eget purus. Quisque rhoncus. Phasellus tempus massa aliquet urna. Integer fringilla quam eget dolor. Curabitur mattis. Aliquam ac lacus. In congue, odio ut tristique adipiscing, diam leo fermentum ipsum, nec sollicitudin dui quam et tortor. Proin id neque ac pede egestas lacinia. Curabitur non odio.<br><br> 

Nullam porta urna quis mauris. Aliquam erat volutpat. Donec scelerisque quam vitae est. Aenean vitae diam at erat pellentesque condimentum. Duis pulvinar nisl sed orci. Vivamus turpis nisi, volutpat in, placerat et, pharetra nec, eros. Suspendisse tellus metus, sodales non, venenatis a, ultrices auctor, erat. In ut leo nec elit mattis pellentesque. Sed eros elit, cursus accumsan, sollicitudin a, iaculis quis, diam. Pellentesque fermentum, pede a nonummy varius, ligula velit laoreet erat, et lacinia nibh nulla sit amet nunc. Suspendisse at turpis quis augue pellentesque pretium. Nunc condimentum elit semper felis.<br><br> 

Duis imperdiet diam pharetra nisi. Fusce accumsan. Fusce adipiscing, felis non ornare egestas, risus elit placerat mauris, in mollis ante erat quis nisi. Quisque sed ipsum. Nulla facilisi. Donec arcu erat, sodales quis, cursus eget, posuere eget, tellus. Vestibulum eu risus. Curabitur adipiscing, odio in pretium feugiat, nulla magna vehicula lorem, at placerat tortor nisl eget velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse mollis fermentum massa. </div>

＆＃13;

Answer 3

希望它对您有所帮助。感谢。

＆＃13;

.aboutTitle {
display: table-cell;
background-color: red;
float: left;
width: 50%;
height: 100%;
position:fixed;
}

.aboutText {
display: table-cell;
background-color: orange;
float: left;
width: 50%;
height: 100%;
position:absolute;
right:0px;
}

＆＃13;

<section class="about">
<div class="aboutTitle">
    about
</div>

<div class="aboutText">
    <p style="font-size: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>

＆＃13;

Answer 4

上周在做同样的事情后，有兴趣发现这一点。

我使用嵌套的flex框来实现这一目标。这是我用于地图弹出的非常编辑的版本。通过一点点工作，你也可以重新安排手机甚至是平板电脑，但我把它留给你。

<强> CSS

#container {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    width: 600px;
    height: 340px;
}
#header {
    flex: 0 0 auto;
    height: 35px;
    background-color: orange;
    border-bottom: 2px solid #CCC;
}
#content {
    display: flex;
    flex-flow: row norwap;
    align-items: stretch;
    min-height: 0;
}
#navbar {
    flex: 0 0 auto;
    padding: 10px 20px 10px 0px;
    border: 1px solid blue;
}
#main {
    flex: 1 1 auto;
    border: 1px solid red;
    display: flex; flex-flow:
    column nowrap;
    align-items: stretch;
}
#map {
    flex: 0 0 auto;
    width: auto;
    height: 100px;
    background-color: blueviolet;
}
#desc {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
}

<强> HTML

<html>
<head>
<title>Super Nested Flexbox Example</title>
</head>
<body>
<div id="container">
    <div id="header">
    </div>
    <div id="content">
        <div id="navbar">
            <ul>
                <li>Douglas Adams</li>
                <li>Sarah Jane Smith</li>
                <li>Patrick Thourton</li>
                <li>Oscar Wilde</li>
            </ul>
        </div>
        <div id="main">
            <div id="map"></div>
            <div id="desc">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis sem maximus, lobortis lacus ut, finibus enim. Donec diam dolor, fermentum sit amet elementum vitae, congue ut lectus. Nullam maximus neque nisl, eu tristique mi accumsan elementum. Phasellus quis nulla urna. Phasellus nec mauris maximus, elementum ante id, tristique velit. Praesent luctus placerat aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae turpis ut metus lobortis aliquet. Cras sollicitudin tempus hendrerit. Quisque rhoncus eleifend ex, at finibus elit ultrices nec. Fusce tincidunt diam eu nisi iaculis vestibulum. Suspendisse potenti. Cras facilisis lobortis nunc quis faucibus. Vestibulum aliquet nulla ac tortor molestie, a cursus mi tincidunt. Proin faucibus dictum est, sit amet convallis elit convallis in. 
            </div>
        </div>
    </div>
</div>
</body>
</html>

注意使用＆＃34; min-height：0;＆＃34;这对于FireFox实施Flexbox是必要的。

希望这有帮助！

如何使页面右侧滚动而左侧不滚动？

4 个答案: