Question

1。摘要

如果我使用gemini-scrollbar而不是原生滚动条，我无法指出，我的侧边栏不会滚动。

2。数据

我的侧边栏aside标记，
我的文章在main标记中的内容。

aside and main

我的最小示例代码（另请参阅in Codepen）：

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Sticky demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
    <script>
        window.onload = function() {
            var scrollbar = new GeminiScrollbar({
                element: document.querySelector("body"),
                autoshow: true,
                forceGemini: true,
            }).create();
        };
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.css">
    <style>
        html,
        body {
            height: 100%;
            /*overflow: hidden;*/
        }

        body {
            margin: 0;
            padding: 0;
        }

        aside {
            background-size: cover;
            height: 100%;
            background-image: url("https://kristinita.ru/theme/images/aside/SashaGreenSweater.jpg");
            float: left;
        }

        @media screen and (orientation: portrait) {
            aside {
                width: 100%;
            }
        }

        @media screen and (orientation: landscape) {
            aside {
                width: 35%;
                position: fixed;
            }
            main {
                width: 65%;
                float: right;
            }
        }
    </style>
</head>

<body>
    <aside>
    </aside>
    <main>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente officia ipsum ut harum voluptates, esse unde nam nobis minus nemo cumque, rerum odit aliquam vitae dicta, aliquid eveniet veritatis totam.</div>
        <div>Magnam eos esse reprehenderit saepe, natus, placeat quas alias eum facilis, unde explicabo velit eaque dicta nostrum recusandae iste culpa. Quidem nisi architecto ratione atque recusandae ea sequi adipisci incidunt.</div>
        <div>Recusandae pariatur ex, a quisquam! Aperiam blanditiis quisquam, officia aut vel, minima laboriosam quam, cumque in maiores enim id unde, deserunt numquam! Vel eligendi qui sunt reprehenderit hic, numquam dolorum.</div>
        <div>Sunt quas iste autem accusantium, illo non praesentium quam accusamus impedit repudiandae voluptate harum maiores tenetur dolorem corrupti dolore magnam, a. Magni error eligendi reiciendis repudiandae quod autem nesciunt magnam.</div>
        <div>Ullam assumenda velit ad amet totam nemo molestiae expedita temporibus, aliquam. Unde maxime, totam laborum eligendi minima consequatur, sequi voluptate cumque eveniet, beatae libero eius quis omnis ut, repellendus porro.</div>
        <div>Cumque nostrum natus omnis temporibus minima unde, similique explicabo provident possimus assumenda molestiae aperiam accusantium odio, non, beatae saepe magnam fugit. Fuga incidunt quae id quisquam expedita sequi, nesciunt ullam.</div>
        <div>Temporibus commodi a numquam soluta tempore, facilis voluptate. Dolore ut, harum, aperiam maxime distinctio quisquam aliquid officiis, laudantium voluptates repudiandae eveniet voluptas laborum debitis autem rem earum soluta temporibus iste!</div>
        <div>Sed quia excepturi dolorem dolores. Quaerat nisi blanditiis sequi atque deleniti eligendi aliquam ad ipsam culpa natus, impedit numquam dolor maiores quisquam repellat officia voluptate omnis ex doloremque sed sint!</div>
        <div>Tenetur consequatur eligendi excepturi nihil, deleniti aliquam. Ut aliquam, laudantium, nostrum necessitatibus, maiores ad neque praesentium illo enim atque repellat amet totam vero cumque aut nemo pariatur perspiciatis iusto id.</div>
        <div>Fuga optio eligendi quaerat facere sint nesciunt corrupti necessitatibus! Ea impedit, quasi veniam hic recusandae ipsum incidunt vitae cum, voluptates modi repellat provident beatae quo doloremque rerum illo. Esse, consectetur.</div>
        <div>Sunt beatae ex ab, cum dignissimos, eligendi doloribus provident! Adipisci itaque voluptate numquam est quae nisi ut dolor repudiandae modi tempora doloribus reiciendis corporis, blanditiis sed dolore ratione! Voluptatum, placeat.</div>
        <div>Natus nobis nisi alias, facilis quae porro. Error doloremque quidem harum obcaecati quasi animi molestiae itaque accusamus, et eligendi. Sapiente quisquam mollitia fugiat quos voluptatibus assumenda. Consectetur ratione, officiis eos.</div>
        <div>Commodi obcaecati, nemo. Repellendus voluptatem, voluptatibus vero, assumenda molestias dolorem maiores dolore delectus odit magnam numquam corrupti possimus quibusdam error quae repudiandae in est quod tempora accusantium odio hic quaerat.</div>
        <div>Ea eligendi, dolor nostrum necessitatibus porro hic qui repellat soluta veniam similique, ab quae vero, ipsam obcaecati error accusamus. Fugiat temporibus sed magnam repudiandae totam nam minus obcaecati enim, voluptatibus!</div>
        <div>Autem dignissimos voluptatem velit molestias recusandae id minima, provident accusantium consequatur, aut temporibus corrupti quaerat quasi quis adipisci numquam minus in rerum dolorum, optio delectus atque ex aspernatur perspiciatis expedita.</div>
        <div>Repellat aspernatur sequi, ad veniam veritatis rerum necessitatibus hic voluptatibus delectus dolore eaque quasi in quaerat deserunt, sunt. Recusandae praesentium quibusdam nihil sapiente magni eum iusto iste esse ex a!</div>
        <div>Obcaecati omnis adipisci laboriosam temporibus, delectus enim debitis earum voluptatibus, culpa impedit quia et eaque nesciunt. Quos, incidunt debitis. Veniam quaerat nihil maxime numquam eaque beatae delectus, quo ex harum.</div>
        <div>Enim illum non, accusantium quas sed quisquam minus aut illo, expedita voluptatum? Odio iure sequi, maiores repellendus quasi ratione distinctio consequatur quaerat perferendis. Iusto eum tempora nostrum necessitatibus, reiciendis aperiam.</div>
        <div>Beatae doloribus, officia repellat illo provident temporibus numquam accusamus. Excepturi, tempora unde alias officiis architecto ex odio voluptatum autem adipisci, voluptas sed quos, praesentium pariatur quia tenetur sequi veniam fuga!</div>
        <div>Harum quibusdam sequi repudiandae culpa voluptas reprehenderit quod eaque earum odio. Earum vitae non reprehenderit incidunt, eveniet error eum nihil iure sapiente cum, nesciunt, fuga accusamus nulla natus. Obcaecati, quaerat.</div>
        <div>Autem dicta recusandae, esse saepe? Expedita consectetur ipsa vitae at esse provident, accusantium molestias, labore, neque totam ullam blanditiis autem perspiciatis minima deleniti iure veniam! Numquam veritatis saepe molestias tempora.</div>
        <div>Nesciunt esse similique unde laudantium deleniti. Debitis dignissimos magni exercitationem nulla eius pariatur ducimus minima reiciendis! Eligendi saepe aspernatur laudantium necessitatibus ipsam sed, maxime a. Inventore velit itaque, obcaecati magni.</div>
        <div>Repudiandae nam dolores perspiciatis totam minus incidunt, error nihil itaque facere alias, perferendis sit vel! Culpa delectus, maiores assumenda accusamus amet maxime dolores, rerum! Accusantium ipsum distinctio numquam aperiam dolore.</div>
        <div>Officiis tempore quae sint iste facere corporis eius ea quos sapiente, et, quo dolore repellat commodi magni quam reprehenderit quisquam perspiciatis nihil ducimus nisi maiores necessitatibus. Non minus, fugiat tempore.</div>
        <div>Aspernatur maxime veniam reiciendis quo animi perspiciatis magnam, quidem quos itaque consectetur ratione eius. A, repudiandae consequatur quam doloribus suscipit harum, commodi numquam, in fugit et nostrum quo sunt ex!</div>
    </main>
</body>

</html>

3。预期的行为

如果I use native browser scrollbar，position: fixed帮助我：

Native

4。实际行为

如果I use gemini-scrollbar，aside滚动main：

Gemini

5。没帮忙

例如：

5.1。 Theia Sticky Sidebar

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/resize-sensor/ResizeSensor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/theia-sticky-sidebar/dist/theia-sticky-sidebar.min.js"></script>
<script>
    jQuery(document).ready(function() {
        jQuery('main, aside').theiaStickySidebar({
            additionalMarginTop: 0
        });
    });
</script>

Result

5.2。 Sticky sidebar

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sticky-sidebar/dist/jquery.sticky-sidebar.min.js"></script>
<script>
    $('aside').stickySidebar({
        topSpacing: 60,
        bottomSpacing: 60
    });
</script>

Result

6。不提供

请不要提供：

6.1。 “不要使用gemini-scrollbar”

我不知道另一个自定义滚动条：

替换原生身体滚动条，
没有严重错误，
开源，
主动维护。

6.2。 “使用`document.querySelector("main")`代替`document.querySelector("body")`”

如果横向为document.querySelector("main")，我的网站会出现一些问题。

例如，用户打开anchor of any page of my real site→用户调整屏幕从横向到纵向，或相反地→滚动条移动到我的页面的开头。我不知道，我怎么能解决这个错误。

Answer 1

1。摘要

作为answered plugin owner，我需要添加：

.gm-scrollbar-container .gm-scroll-view {
  transform: initial;
}

2。示范

Demo

Codepen：
- Sources
- Demo page
Stack Overflow：

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Sticky demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
    <script>
        window.onload = function() {
            var scrollbar = new GeminiScrollbar({
                element: document.querySelector("body"),
                autoshow: true,
                forceGemini: true,
            }).create();
        };
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.css">
    <style>
        html,
        body {
            height: 100%;
            /*overflow: hidden;*/
        }

        body {
            margin: 0;
            padding: 0;
        }

        aside {
            background-size: cover;
            height: 100%;
            background-image: url("https://kristinita.ru/theme/images/aside/SashaGreenSweater.jpg");
            float: left;
        }

        @media screen and (orientation: portrait) {
            aside {
                width: 100%;
            }
        }

        @media screen and (orientation: landscape) {
            aside {
                width: 35%;
                position: fixed;
            }
            main {
                width: 65%;
                float: right;
            }
        }

        .gm-scrollbar-container .gm-scroll-view {
          transform: initial;
        }
    </style>
</head>

<body>
    <aside>
    </aside>
    <!-- Content -->
    <main>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente officia ipsum ut harum voluptates, esse unde nam nobis minus nemo cumque, rerum odit aliquam vitae dicta, aliquid eveniet veritatis totam.</div>
        <div>Magnam eos esse reprehenderit saepe, natus, placeat quas alias eum facilis, unde explicabo velit eaque dicta nostrum recusandae iste culpa. Quidem nisi architecto ratione atque recusandae ea sequi adipisci incidunt.</div>
        <div>Recusandae pariatur ex, a quisquam! Aperiam blanditiis quisquam, officia aut vel, minima laboriosam quam, cumque in maiores enim id unde, deserunt numquam! Vel eligendi qui sunt reprehenderit hic, numquam dolorum.</div>
        <div>Sunt quas iste autem accusantium, illo non praesentium quam accusamus impedit repudiandae voluptate harum maiores tenetur dolorem corrupti dolore magnam, a. Magni error eligendi reiciendis repudiandae quod autem nesciunt magnam.</div>
        <div>Ullam assumenda velit ad amet totam nemo molestiae expedita temporibus, aliquam. Unde maxime, totam laborum eligendi minima consequatur, sequi voluptate cumque eveniet, beatae libero eius quis omnis ut, repellendus porro.</div>
        <div>Cumque nostrum natus omnis temporibus minima unde, similique explicabo provident possimus assumenda molestiae aperiam accusantium odio, non, beatae saepe magnam fugit. Fuga incidunt quae id quisquam expedita sequi, nesciunt ullam.</div>
        <div>Temporibus commodi a numquam soluta tempore, facilis voluptate. Dolore ut, harum, aperiam maxime distinctio quisquam aliquid officiis, laudantium voluptates repudiandae eveniet voluptas laborum debitis autem rem earum soluta temporibus iste!</div>
        <div>Sed quia excepturi dolorem dolores. Quaerat nisi blanditiis sequi atque deleniti eligendi aliquam ad ipsam culpa natus, impedit numquam dolor maiores quisquam repellat officia voluptate omnis ex doloremque sed sint!</div>
        <div>Tenetur consequatur eligendi excepturi nihil, deleniti aliquam. Ut aliquam, laudantium, nostrum necessitatibus, maiores ad neque praesentium illo enim atque repellat amet totam vero cumque aut nemo pariatur perspiciatis iusto id.</div>
        <div>Fuga optio eligendi quaerat facere sint nesciunt corrupti necessitatibus! Ea impedit, quasi veniam hic recusandae ipsum incidunt vitae cum, voluptates modi repellat provident beatae quo doloremque rerum illo. Esse, consectetur.</div>
        <div>Sunt beatae ex ab, cum dignissimos, eligendi doloribus provident! Adipisci itaque voluptate numquam est quae nisi ut dolor repudiandae modi tempora doloribus reiciendis corporis, blanditiis sed dolore ratione! Voluptatum, placeat.</div>
        <div>Natus nobis nisi alias, facilis quae porro. Error doloremque quidem harum obcaecati quasi animi molestiae itaque accusamus, et eligendi. Sapiente quisquam mollitia fugiat quos voluptatibus assumenda. Consectetur ratione, officiis eos.</div>
        <div>Commodi obcaecati, nemo. Repellendus voluptatem, voluptatibus vero, assumenda molestias dolorem maiores dolore delectus odit magnam numquam corrupti possimus quibusdam error quae repudiandae in est quod tempora accusantium odio hic quaerat.</div>
        <div>Ea eligendi, dolor nostrum necessitatibus porro hic qui repellat soluta veniam similique, ab quae vero, ipsam obcaecati error accusamus. Fugiat temporibus sed magnam repudiandae totam nam minus obcaecati enim, voluptatibus!</div>
        <div>Autem dignissimos voluptatem velit molestias recusandae id minima, provident accusantium consequatur, aut temporibus corrupti quaerat quasi quis adipisci numquam minus in rerum dolorum, optio delectus atque ex aspernatur perspiciatis expedita.</div>
        <div>Repellat aspernatur sequi, ad veniam veritatis rerum necessitatibus hic voluptatibus delectus dolore eaque quasi in quaerat deserunt, sunt. Recusandae praesentium quibusdam nihil sapiente magni eum iusto iste esse ex a!</div>
        <div>Obcaecati omnis adipisci laboriosam temporibus, delectus enim debitis earum voluptatibus, culpa impedit quia et eaque nesciunt. Quos, incidunt debitis. Veniam quaerat nihil maxime numquam eaque beatae delectus, quo ex harum.</div>
        <div>Enim illum non, accusantium quas sed quisquam minus aut illo, expedita voluptatum? Odio iure sequi, maiores repellendus quasi ratione distinctio consequatur quaerat perferendis. Iusto eum tempora nostrum necessitatibus, reiciendis aperiam.</div>
        <div>Beatae doloribus, officia repellat illo provident temporibus numquam accusamus. Excepturi, tempora unde alias officiis architecto ex odio voluptatum autem adipisci, voluptas sed quos, praesentium pariatur quia tenetur sequi veniam fuga!</div>
        <div>Harum quibusdam sequi repudiandae culpa voluptas reprehenderit quod eaque earum odio. Earum vitae non reprehenderit incidunt, eveniet error eum nihil iure sapiente cum, nesciunt, fuga accusamus nulla natus. Obcaecati, quaerat.</div>
        <div>Autem dicta recusandae, esse saepe? Expedita consectetur ipsa vitae at esse provident, accusantium molestias, labore, neque totam ullam blanditiis autem perspiciatis minima deleniti iure veniam! Numquam veritatis saepe molestias tempora.</div>
        <div>Nesciunt esse similique unde laudantium deleniti. Debitis dignissimos magni exercitationem nulla eius pariatur ducimus minima reiciendis! Eligendi saepe aspernatur laudantium necessitatibus ipsam sed, maxime a. Inventore velit itaque, obcaecati magni.</div>
        <div>Repudiandae nam dolores perspiciatis totam minus incidunt, error nihil itaque facere alias, perferendis sit vel! Culpa delectus, maiores assumenda accusamus amet maxime dolores, rerum! Accusantium ipsum distinctio numquam aperiam dolore.</div>
        <div>Officiis tempore quae sint iste facere corporis eius ea quos sapiente, et, quo dolore repellat commodi magni quam reprehenderit quisquam perspiciatis nihil ducimus nisi maiores necessitatibus. Non minus, fugiat tempore.</div>
        <div>Aspernatur maxime veniam reiciendis quo animi perspiciatis magnam, quidem quos itaque consectetur ratione eius. A, repudiandae consequatur quam doloribus suscipit harum, commodi numquam, in fugit et nostrum quo sunt ex!</div>
    </main>
</body>

</html>

3。解释

transform中的

gemini-scrollbar.css财产：1，2。

transform create a new local coordinate system

initial关键字用于将CSS属性设置为其默认值。

如果双子座滚动条

1。摘要

2。数据

3。预期的行为

4。实际行为

5。没帮忙

5.1。 Theia Sticky Sidebar

5.2。 Sticky sidebar

6。不提供

6.1。 “不要使用gemini-scrollbar”

6.2。 “使用`document.querySelector("main")`代替`document.querySelector("body")`”

1 个答案:

1。摘要

2。示范

3。解释

4。其他链接

如果双子座滚动条

1。摘要

2。数据

3。预期的行为

4。实际行为

5。没帮忙

5.1。 Theia Sticky Sidebar

5.2。 Sticky sidebar

6。不提供

6.1。 “不要使用gemini-scrollbar”

6.2。 “使用document.querySelector("main")代替document.querySelector("body")”

1 个答案:

1。摘要

2。示范

3。解释

4。其他链接

6.2。 “使用`document.querySelector("main")`代替`document.querySelector("body")`”