jquery 让滚动条在页面中浮动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。滚动条是浏览器窗口的一部分，允许用户滚动查看页面上不在视口内的内容。

类型

滚动条浮动通常指的是将滚动条从页面边缘移出，使其在页面内容中浮动显示。这种效果可以通过 CSS 和 JavaScript 实现。

应用场景

滚动条浮动常用于以下场景：

长页面导航：在长页面中，浮动滚动条可以帮助用户快速定位内容。
自定义滚动条样式：通过浮动滚动条，可以实现更美观的自定义滚动条样式。

实现方法

以下是一个使用 jQuery 和 CSS 实现滚动条浮动的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动滚动条示例</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="content">
        <!-- 页面内容 -->
        <p>这是一个很长的页面，我们需要一个浮动滚动条来帮助导航。</p>
        <!-- 更多内容 -->
    </div>
</body>
</html>

CSS (styles.css)

body {
    margin: 0;
    padding: 0;
}

.content {
    width: 80%;
    margin: 0 auto;
    height: 2000px; /* 设置一个较大的高度以便测试滚动条 */
    position: relative;
}

.scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background-color: #ccc;
}

JavaScript (script.js)

$(document).ready(function() {
    var $content = $('.content');
    var $scrollbar = $('<div class="scrollbar"></div>');
    $content.append($scrollbar);

    $content.on('scroll', function() {
        var scrollTop = $content.scrollTop();
        var scrollHeight = $content[0].scrollHeight;
        var clientHeight = $content.innerHeight();
        var scrollPercent = scrollTop / (scrollHeight - clientHeight);
        var scrollbarHeight = scrollPercent * clientHeight;
        $scrollbar.css({
            height: scrollbarHeight + 'px',
            top: scrollTop + 'px'
        });
    });
});

可能遇到的问题及解决方法

滚动条位置不准确：可能是由于计算滚动条位置的公式不正确。确保 scrollTop、scrollHeight 和 clientHeight 的计算正确。
滚动条样式不一致：不同浏览器对滚动条的默认样式有所不同。可以通过 CSS 重置和自定义样式来解决。
性能问题：频繁的 DOM 操作和事件处理可能导致性能问题。可以使用 requestAnimationFrame 来优化滚动事件的处理。

通过以上方法，你可以实现一个浮动滚动条，并解决可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

如何使水平滚动条始终位于屏幕底部？

、、

我在一个页面上有两个div，一个在左边，另一个在right..the右边。div有很多动态生成的标签，所以这个div下面有一个水平滚动条(overflow:auto)。现在这个page.So的高度超过了可见的div，在右边有一个垂直滚动条。所以用户必须滚动到页面底部才能得到水平滚动bar...So我想要的是让滚动条浮动在屏幕底部，而不是页面上，这样用户就可以访问水

浏览 0提问于2011-08-05得票数 2

1回答

我怎样才能让Firefox在每次滚动“动作”时都像Chrome一样在滚动上触发一次？

、、、

我一直致力于让“浮动然后修复”导航栏在没有任何JavaScript库(如JQuery)的大多数浏览器上工作。它可以在Chrome上工作，但我在FF上有一个小问题，这似乎是由于FF在执行“滚动操作”时多次触发onscroll - PdDn、PdUp、上下箭头键、滚动条上的上下箭头、单击滚动条等。有没有办法让FF像Chrome一样只触发一次？我将创建一个，让您通过在控制台上记录&qu

浏览 6提问于2015-09-10得票数 0

1回答

调整容器大小时，带有浮动右侧的图片正在跳转

、、

.}，200)正在调整大小时，右侧滚动条消失了(仅在通过单击游戏切换游戏菜单所导致的大小调整期间，并且因为我在关于我页面右侧的肖像具有浮动样式:右，被弄乱了一阵子，1.即使在jquery动画更改宽度的过程中也要保留滚动条2.建议如何让图像始终保持在同一位置，而不是像现在这样跳跃当您查看源代码时，整个css都在一个文件<e

浏览 1提问于2013-03-01得票数 0

2回答

如何使HTML/CSS中的两列成比例，其中左列跟随用户滚动？

、、

左列的顶部只有少量内容，应该随着页面向下滚动(滚动时与页面一起浮动)。右边的列有大量的数据，没有滚动条，浏览器将向下滚动页面。请看这里的例子，看看我说的是什么：我在左div中用JQuery UI日历更新了这个示例，以显示如何定位:修复；布局不会调整右列correclty的大小( JQuery日历有问题，因为它溢出了div左列的顶部只有少量内容，应该随着页面向下滚动(滚动时与页面一起浮动)。右

浏览 4提问于2009-06-10得票数 0

2回答

可以使用页面滚动条来滚动内部div吗？

、、、

是否可以删除内部滚动条并将其更改为页面的滚动条？当前在div中使用滚动条的示例是。我怀疑这可能需要使用Javascript来完成，在Stack Overflow上搜索会显示许多引用它的条目，但我有点希望不需要使用Javascript来完成。目前，我只是让用户在div中滚动，但这并不是一个优雅的解决方案：position: fixed;bottom: 20px; backgroun

浏览 1提问于2013-08-08得票数 2

3回答

将自动高度设置为container时，它会将页面翻转

、

我将每个div设置为浮动到不同的一侧。一个向左，一个向右，现在我遇到的问题是，由于我必须手动设置高度，它将页面从原始位置移动了大约10个像素。因此，当我加载一个不同的页面时，它不是垂直排列的。谢谢 <!sans-serif; text-align: center;} 最后，我的news.html (位于原始位置的页面

浏览 0提问于2018-09-29得票数 1

2回答

与浏览器大小相关的Div浮动和溢出

我有一个网站建立的div浮动到页面的各个部分，以创建我想要的外观。我的问题是，当我把我的浏览器变小时，所有的浮动都塞满了左边，而不是保持它们的位置并简单地给出一个滚动条。我只想让我的页面在浏览器没有最大化的情况下保持它们的形式。

浏览 1提问于2011-11-10得票数 1

1回答

滚动条强制向下移动

、、

我在一个内容容器中有两个div，一个向左浮动，另一个向右浮动。我用的是整个屏幕的宽度。左div宽度为1290px，右div宽度为625px。有时，当加载页面时，滚动条改变了可用屏幕宽度的宽度，导致向右浮动的div在向左浮动的div下被捕获。这发生在我添加了一个footer div之后。我不想让这两个div的宽度变小，因为这是为了在客户办公室中显示广告。我需要全屏显示。谢谢!

浏览 2提问于2012-01-13得票数 0

3回答

在浏览器窗口中将图片对齐到右下角

如果我将页面的整体宽度设置为100%，并将图片设置为浮动在底部，这就完美了，但上面提到的图片是一幅更大的宽度图片，大约为1600 in，所以当您在小窗口浏览器中打开页面时，浮动的图片是对齐的，但是滚动条和滚动到页面的全宽度时，没有浮动的图片。固定宽度比上面提到的图片要大：第一种解决方案需要调整，但我想不出它是如何解决的，一些响

浏览 1提问于2013-01-16得票数 0

回答已采纳

1回答

角2+中的浮动水平滚动条

、、

在6号角，我有一张又宽又长的桌子。问题是要水平滚动，用户需要转到表的底部，才能访问卷轴。我想要实现一个浮动的水平滚动条，当表在视图中时，它会浮动水平滚动条。我在使用Jquery时遇到了这些解决方案，但很难在角6(或5、4、3等)中实现这些解决方案。有没有人有这个解决方案，或者可以帮助我如何在角度上实现？提前谢了。

浏览 0提问于2018-11-24得票数 2

1回答

在Flex中创建浮动滚动条

我正在尝试创建一个浮动的水平滚动条，当用户垂直滚动时，它将跟随屏幕。我有一个数据网格，它不能垂直滚动，而是水平滚动(有很多列)。网格所在的容器是可垂直滚动的。现在，当用户想要水平滚动时，他们必须一直向下滚动到页面底部，向左/向右滚动，然后返回到他们所在的位置。我想要做的是让网格上的水平滚动条在网格上下滚动时沿着网格浮动，这样它将在任何时候都是可见的。

浏览 4提问于2012-05-30得票数 0

1回答

“清除:两个”+“高度: 100%”超过页面底部

下面是一个示例：请注意，蓝色框架会导致出现滚动条，并超过页面高度，尽管它是"100%“。当"clear: both“属性被移除时，它会按预期呈现(JsFiddle仍然会添加一个不需要的滚动条，但在正常呈现时，我不会遇到这个问题)。我的目的是让底部的div (JsFiddle中的蓝色)一直到页面高度的底部，但停止在页面的底部，正确地绘制边框，与边框的方式相同。问题是，我确实在div上面有内容，它有一个浮动属性，要求

浏览 3提问于2012-10-06得票数 1

回答已采纳

2回答

如何并排浮动超出页面大小的元素？

、

我遇到了一个奇怪的情况，我需要浮动两个元素。第一个像素相当小，大约是250px。第二个是大的(800px)，创建水平滚动条。我想让这两个元素都浮动，这样它们是并排的，但是第二个元素被推到它自己的行上？当两个元素占用的空间超过页面时，是否可以并排浮动两个元素？我不能改变页面大小，或者其他任何东西。

浏览 0提问于2011-03-23得票数 0

回答已采纳

3回答

jQuery .height()在带有overflow的div上输出与.scrollHeight相同的值:auto (IE8)

、、、、

在绕过许多其他问题之后，我还没有找到解决问题的答案。 width: 73%; float: left; top: 0px;我已经在jsFiddle上创建了一个场景的模型： (确保将预览屏幕缩小以创建<

浏览 1提问于2014-09-02得票数 8

回答已采纳

1回答

是否有一种jQuery技术可以选择所有具有非零滚动条位置的页面控件/div？

、、

是否有一种jQuery技术可以选择所有具有非零滚动条位置的页面控件/div？我正在尝试解决一个许多人都面临的问题；基本上，在部分asp.net回发之后，所有具有非零值滚动条的控件/div(例如，向下滚动到某个位置)都会被重置为零(滚动条的顶部)。我的方法是让jQuery脚本保存页面上包含的所有控件/div的所有滚动条位置，并在回发后恢复所有滚动条位置。有没有可能，它能

浏览 1提问于2010-09-10得票数 1

回答已采纳

1回答

为两个独立的div提供一个滚动条

、、、

我正在寻找的是:我想要的是一个可访问的滚动条在屏幕的最右边。我想要那个小条滚动左和右div的。有人能帮我这个忙吗？<?stylesheet" href="css/style.css" type="text&#

浏览 2提问于2013-09-06得票数 1

回答已采纳

1回答

单页站点水平滚动教程

、

本质上，它是一个单页面，水平滚动的网站，在顶部和底部有固定的页眉和页脚。与使用按钮或滚动条滚动不同，单击导航菜单中的链接会将页面移动到相应的部分，很可能是使用jQuery。因此，将有六个左右的浮动div堆叠在一行中。我已经列出了基本框架，但我不知道如何允许主要内容部分扩展到超出窗口大小，从而允许所有这些div浮动在一行中。

浏览 2提问于2012-10-04得票数 0

回答已采纳

1回答

如何在PDF中添加浮动按钮？

、

我想在PDF中添加一个浮动按钮。然而，在互联网上做了很多研究之后，我没有找到任何答案。我希望在滚动文档时使用滚动条使按钮在页面上浮动/移动。有没有办法在PDF中实现它？

浏览 1提问于2016-05-13得票数 0

2回答

创建停留在div中的浮动框

、、

我正在尝试创建一个div‘浮动’，它的行为类似于一个固定的div (无论滚动与否都被固定在一个特定的位置)，但是当它到达它所在的div的边界时，它就不再是固定的了。当滚动条在顶部时，它应该将div放在包含的div中的0处(放置在距顶部100像素的位置)，当滚动条到达底部时，它应该阻止浮动框离开容器。浮动对象的高度将是静态的，但容器高度将是动态的。我已经在各处看到了这种类型的东西，但我不知道如何找到一个好的例子。如果可能的话，我希望避免

浏览 2提问于2011-03-28得票数 0

回答已采纳

1回答