javascript - 禁用侧边栏滚动(如果是双子座滚动条)

标签 javascript jquery css scrollbar

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位置:固定帮助我:

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。 “不要使用双子滚动条”

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

  • 替换原生正文滚动条,
  • 可以正常运行,没有严重错误,
  • 开源,
  • 主动维护。

6.2。 “使用 document.querySelector("main") 而不是 document.querySelector("body")

如果 document.querySelector("main") 处于横向方向,我的网站会出现一些问题。

例如用户打开anchor of any page of my real site → 用户将屏幕大小从横向调整为纵向或相反 → 滚动条移动到页面开头。我不知道如何修复这个错误。

最佳答案

1。摘要

answered plugin owner ,我需要添加:

.gm-scrollbar-container .gm-scroll-view {
  transform: initial;
}
<小时/>

2。演示

Demo

<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属性(property) gemini-scrollbar.css : 1 , 2 .

transform create a new local coordinate system .

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

<小时/>

4。附加链接

关于javascript - 禁用侧边栏滚动(如果是双子座滚动条),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49296892/

相关文章:

javascript - Hubspot drop.js - Uncaught ReferenceError : Drop is not defined

javascript - 更改字段值时如何运行函数?

jquery - 使用 jquery/css 缩写 <table> 列中的文本

css - 在 div 内带有滚动条的表格

html - 全尺寸链接作为缩进嵌套无序列表中的 block ?

javascript - 如何从 Firefox 插件访问选项卡的内容

javascript - 如何用javascript中选择的日期计算当前日期?

javascript - 在Processing.js中,如何声明对象类型和对象数组?

javascript - 为什么我的 CoffeeScript/backbone.js 事件没有触发?

javascript - 在图像 slider 动画中获得平滑过渡