个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 13:16:12 26 4
gpt4 key购买 nike

因此，正如标题所述，我正在尝试让网站的一侧滚动，而另一侧保持不变。我找到了一个完全符合我要求的示例:

http://melaniedaveid.com/

如果您在该网站上向下滚动一点，您会看到带有“关于”的左侧将静止不动，如果您向下滚动，带有文本的右侧将向下滚动。有没有人知道如何做到这一点？

到目前为止，我只有 2 个相邻的 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;

我一删除“主页”部分，它就开始工作了。但当然我仍然希望能够使用那个“主页”部分。有谁知道我如何既可以使用这两个部分又可以在一侧使用滚动条？

JSFiddle:Link

最佳答案

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

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

- codepen

- jsfiddle 

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

关于javascript - 如何使页面右侧滚动而左侧不滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35795815/

26 4 0
文章推荐： android - 如何在 Osmand Android 中更改 primaryRoadColor？
文章推荐： javascript - Firefox 在使用 JavaScript 动画的 Logo 上方添加了不需要的细线
文章推荐： android - 无法使用其中的 appcompat 元素创建自定义数组适配器
文章推荐： html - CSS 使 flex 包裹的元素不超过其 sibling 的宽度
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com