随着互联网的普及，网站已经成为人们主要的信息交互方式之一。而在网站的开发中，无缝滚动是一个比较常见的设计需求。本文将为大家介绍如何使用jquery滚动条实现页面无缝滚动的技巧。

一、什么是jQuery滚动条？

jQuery是一款JavaScript库，它可以帮助开发者更方便地操作DOM和处理事件。而jQuery滚动条则是jQuery中一个非常实用的插件。它可以帮助我们实现更加灵活的页面滚动效果。使用jQuery滚动条，我们可以快速地创建一个自定义的滚动条、自动进入无限滚动、切换标签时保留滚动位置等操作。

二、如何使用jQuery滚动条实现页面无缝滚动？

1. 引入jQuery滚动条插件

在使用jQuery滚动条之前，我们需要先引入这个插件。在这里，我们可以直接使用CDN来引入。代码如下：

```

```

2. 创建滚动条

在引入jQuery滚动条之后，我们需要先创建一个滚动条对象。代码如下：

```

$(selector).scrollbar();

```

这里的selector可以是DOM元素或jQuery对象，表示我们要对哪个元素进行滚动条的添加。通过调用scrollbar()方法，即可实现添加滚动条的效果。

3. 设置滚动条样式

我们可以通过设置滚动条的CSS样式，来改变滚动条的颜色、宽度、形状等。例如，我们可以使用如下的CSS样式来设置滚动条的颜色：

```

.scrollbar-track {

background-color: #f2f2f2;

}

.scrollbar-thumb {

background-color: #666;

}

```

其中scrollbar-thumb表示滚动条的拖动块，scrollbar-track表示滚动轨迹。

4. 实现无限滚动

接下来，我们将使用jQuery滚动条来实现无限滚动的效果。首先，我们需要准备一个大容器，其中包括若干个子容器，每个子容器分别包含一段内容。我们将通过滚动条的滚动来实现这些子容器的无限滚动。

具体实现过程如下：

- 记录每个子容器的高度

- 通过jQuery的offset()方法，来获取每个子容器距离大容器顶部的距离

- 监听滚动事件，当滚动条滚动到底部时，将第一个子容器移至末尾，并重新设置一遍第二个及以后子容器的位置。

代码实现如下：

```

var liHeight = [];

$('li').each(function(){

liHeight.push($(this).outerHeight(true));

});

var reHeight = function(){

liHeight.push(liHeight.shift());

$('li').each(function(i){

$(this).css({

top: liHeight.slice(0, i).reduce(function(prev, cur){ return prev+cur }, 0)

});

});

}

var scrollHandler = function(){

var scrollTop = $(this).scrollTop();

var scrollHeight = $(this).prop('scrollHeight')-$(this).height();

if(scrollTop===scrollHeight){

reHeight();

}

}

$('.wrapper').scroll(scrollHandler);

```

在这段代码中，我们通过遍历每个子容器，记录了每个子容器的高度，并通过offset()方法来获取每个子容器距离大容器顶部的距离。然后，我们监听了滚动事件，并通过scrollTop()方法来获取滚动条当前的位置。当滚动条滚动到底部时，我们将第一个子容器移到了末尾，并重新设置了第二个及以后子容器的位置。

5. 实现滚动到指定位置

除了无限滚动外，我们还可以使用jQuery滚动条来实现滚动到指定位置的效果。例如，当点击一个按钮时，页面可以滚动到某个指定位置。

具体实现方法如下：

```

$('.btn-scroll').click(function(){

var target = $('#target-element').offset().top;

$('.wrapper').animate({

scrollTop: target

}, 500);

});

```

在这段代码中，我们首先通过offset()方法获取目标元素距离大容器顶部的距离，然后通过animate()方法来实现滚动动画。

6. 滚动时保持位置

最后，当我们在页面中切换标签页时，我们希望页面能够记住滚动条的位置，以便下次进入时可以直接定位到相应的位置。下面是实现代码：

```

Tab 2

Tab 3