时间戳

首页 > 解决方案 > 将网站分成两部分，分别滚动

javascript - 将网站分成两部分，分别滚动

问题描述

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

<div class="wrapper">
        <div class="left">
            <div class="box"></div>
        </div>
        <div class="right">
            <div class="box"></div>
        </div>
    </div>

每个里面都有一个盒子，这样就可以很容易地看到当前部分的滚动位置

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 上单击我使用 jquery 将其“打开”到全屏宽度，删除父 div 的溢出：隐藏以启用滚动。

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 滚动，我尝试分配位置：固定到不可见的 div，当打开 2 个中的一个时，这确实使它保持在原位。但是，当我尝试打开 position:fixed div 时，将其原始绝对位置分配回去，它只是跳转到另一个 div 的“最后一个滚动点”所在的位置。关于如何使独立滚动的任何想法？

标签： javascriptjquery

解决方案

尝试这个

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

推荐阅读