文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将网站分成2个部分，分别滚动

问将网站分成2个部分，分别滚动
EN

Stack Overflow用户
提问于 2020-09-29 04:25:27
回答 2查看 24关注 0票数 0

网站有2个元素，左右各占50%

代码语言：javascript
复制
<div class="wrapper">
        <div class="left">
            <div class="box"></div>
        </div>
        <div class="right">
            <div class="box"></div>
        </div>
    </div>

每一个都有一个框在里面，这样就很容易看到滚动部分的当前位置。

代码语言：javascript
复制
body {
            display: flex;
        }
        .wrapper {
            width: 100%;
            height: 100%;
            overflow-y: hidden;
            position: relative;
        }
        .left,.right {
            height: 150%;
            width: 50%;
            background: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;

        }
        .right {
            background: #222;
            left: 50%
        }
        .box {
            width: 300px;
            height: 300px;
            background: #bbb;
        }

在左边或右边的div上，点击I 'open‘to full screen width with jquery，移除父div的overflow:hidden以启用滚动。

代码语言：javascript
复制
let i = 0;
        $('.left').click(function(){
            if($(this).width() / $(document).width() == 0.5 && i == 0){
                i = 1
                    $(this).css({'z-index':'2'}).animate({'width':'100%'},300)
                    setTimeout(()=>{
                        $('.wrapper').css({'overflow-y':'auto'})
                    },300)
                i = 0
            }

            if($(this).width() / $(document).width() > 0.8 && i == 0){
                i = 1
                    $(this).animate({'width':'50%'},300)
                    $('.wrapper').css({'overflow-y':'hidden'})
                    setTimeout(()=>{
                        $(this).css({'z-index':'0'})
                    },300)
                i = 0
            }
        })
        $('.right').click(function(){
            if($(this).width() / $(document).width() == 0.5 && i == 0){
                i = 1
                    $(this).css({'z-index':'2'}).animate({'width':'100%','left':'0'},300)
                    setTimeout(()=>{
                        $('.wrapper').css({'overflow-y':'auto'})
                    },300)
                i = 0
            }

            if($(this).width() / $(document).width() > 0.8 && i == 0){
                i = 1 
                    $(this).animate({'width':'50%','left':'50%'},300)
                    $('.wrapper').css({'overflow-y':'hidden'})
                    setTimeout(()=>{
                        $(this).css({'z-index':'0'})
                },300)
                i = 0
            }
        })

我想要实现的是单独的向左和向右的div滚动，我已经尝试将possition : fixed赋值为不可见的div，当2个中的一个打开时，它确实会留在原地。但是，当我尝试打开位置:fixed div，将其原始的绝对位置分配回来时，它只是跳到另一个div的“最后一个滚动点”的位置。对如何使独立滚动有什么建议吗？

javascript
jquery
EN

回答 2

Stack Overflow用户

发布于 2020-09-29 04:30:40

尝尝这个

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

    <title>File compare</title>
    <style>
        .flex {
            display: flex;
            flex-direction: row;
        }

        .flex>.split {
            height: 100vh;
            overflow-y: scroll;
        }

        .gutter.gutter-horizontal {
            cursor: ew-resize;
        }

        .gutter {
            background-color: #eee;
            background-repeat: no-repeat;
            background-position: 50%;
        }

        .gutter.gutter-horizontal {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
        }

        .heading {
            padding: 15px;
            background: #eeeeee;
            text-align: center;
            font-weight: 800;
            color: #0062cc;
            letter-spacing: 2px;
        }
    </style>
</head>

<body>
    <div class="flex">
        <div id="one" class="split">
            <div class="heading">
                Column one
            </div>
            <h4>What is Lorem Ipsum?</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>

            <h4>What is Lorem Ipsum?</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
        </div>
        <div id="two" class="split">
            <div class="heading">
                Column two
            </div>
            <h4>What is Lorem Ipsum?</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>
            <h4>What is Lorem Ipsum?</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I
                t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pas
                sages, and more recently with desktop publishing software like Aldus PageMaker including version
                s of Lorem Ipsum.</p>

        </div>
    </div>


    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script>
    <script>
        Split(['#one', '#two'], {
            sizes: [50, 50]
        });
    </script>
</body>

</html>

​

票数 0
EN

Stack Overflow用户

发布于 2020-09-29 05:59:52

我的初始设置意味着，左或右div溢出了父包装器，这并不是我所需要的。因此，我按照建议使用了overflow:scroll，但默认状态为hidden

代码语言：javascript
复制
.left,.right {
            position: absolute;
            height: 150%;
            width: 100%;
            top: 0;
            display: flex;
            overflow-y: hidden;
            flex-direction: column;
        }

并将其更改为在单击$(this).css({'overflow-y':'scroll'})时在动画之后滚动

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64109144

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档