整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
var positionTop=0, //位置为0
screenPage=0, //显示第一屏幕
currentScrollTop=document.documentElement.scrollTop || document.body.scrollTop,
currentNum=0,
scrollTimer=null;
function vsSideBarFixed() {
//滚动吸顶
var $activeSideBar=$("#hostvs");
var navTop=0;
if ($activeSideBar[0]) {
navTop=$activeSideBar.offset().top;
}
$(document).scroll(function () {
clearTimeout(scrollTimer);
currentNum=0;
var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
// 完善
if ($("#hostvs").length > 0 && $("#headernav .ajaxcontent").length <=0) {
$("#headernav").append(
`<div class="PageHeader-ajax">${$("#hostvs").html()}</div>`
);
}
if ($("#navSearchInp").length > 0) {
$("#navSearchInp").trigger("blur");
$(document)
.find("#headernav")
.addClass("navhidden")
.removeClass("navOpacity");
}
if (scrolltop > navTop) {
$(document)
.find("#headernav")
.addClass("is-hidden")
.find(".PageHeader-ajax")
.addClass("is-shown");
} else {
$(document)
.find("#headernav")
.removeClass("is-hidden")
.find(".PageHeader-ajax")
.removeClass("is-shown");
}
//设置定时器
scrollTimer=setInterval(function () {
//判断是否停止滚动
if (scrolltop==currentScrollTop && currentNum <=5) {
// console.log("滚动条已停止");
$(document)
.find("#headernav")
.removeClass("navhidden")
.addClass("navOpacity");
}
//更新位置
currentScrollTop=scrolltop;
// console.log(`${currentScrollTop}----${scrolltop}`);
}, 500);
});
}
$(function () {
vsSideBarFixed(); //吸顶效果
});Vue.js中，要实现滚动到底部的效果，可以通过以下几个步骤来完成：
1. 获取滚动容器的高度和滚动条的高度。
```javascript
// 获取滚动容器
const container=document.getElementById('container');
// 获取滚动容器的高度
const containerHeight=container.offsetHeight;
// 获取滚动条的高度
const scrollHeight=container.scrollHeight;
```
2. 判断滚动条是否已经滚动到底部。
```javascript
// 判断滚动条是否已经滚动到底部
const isScrollToBottom=container.scrollTop + containerHeight===scrollHeight;
```
3. 如果滚动条已经滚动到底部，则执行相应的操作。
```javascript
if (isScrollToBottom) {
// 执行滚动到底部的操作
}
```
4. 为了实现滚动到底部的效果，可以使用`scrollTo`方法来滚动到指定位置。
```javascript
// 滚动到底部
container.scrollTo(0, scrollHeight);
```
完整的代码如下：
```html
<template>
<div id="container" style="height: 300px; overflow-y: scroll;">
<!-- 滚动内容 -->
</div>
</template>
<script>
export default {
mounted() {
// 获取滚动容器
const container=document.getElementById('container');
// 监听滚动事件
container.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
// 获取滚动容器的高度
const containerHeight=this.$el.offsetHeight;
// 获取滚动条的高度
const scrollHeight=this.$el.scrollHeight;
// 判断滚动条是否已经滚动到底部
const isScrollToBottom=this.$el.scrollTop + containerHeight===scrollHeight;
if (isScrollToBottom) {
// 执行滚动到底部的操作
this.scrollToBottom();
}
},
scrollToBottom() {
// 滚动到底部
this.$el.scrollTo(0, this.$el.scrollHeight);
}
}
}
</script>
```
这样，当滚动条滚动到底部时，就会执行`scrollToBottom`方法，将滚动条滚动到底部。
icescroll 滚动条插件是一个非常强大的基于 jQuery 的滚动条插件，不需要增加额外的css，几乎全浏览器兼容。ie6+，实现只需要一段代码，侵入性非常小，样式可完全自定义，支持触摸事件，可在触摸屏上使用。
强大的不能让你呼吸！兼容、适配、美观都是那么完美！一起体验一下它的酣畅淋漓！
因此，您拥有可用于iPad的动量可定制和可滚动div，并且所有台式机和移动平台都具有一致的可滚动区域。
性感的缩放功能，您可以“放大”任何nicescrolled div的内容。全屏模式下div的所有内容都易于使用和查看。它可以使用捏合手势在移动/触摸设备的桌面设备（双击div）上工作。
在现代浏览器上，已经实现了硬件加速滚动。使用animationFrame进行最流畅且节省CPU的滚动。（当浏览器支持时）
“使用严格的”经过测试的脚本可获得最高的代码质量。Bower和AMD准备就绪。
对IE6 / 7用户的警告（您为什么要使用？请升级到更稳定和更现代的浏览器），已弃用对您的浏览器的支持。
具体的使用方法及其如何加载依赖，我这边就不多说了，大家可以上官网教程及gitHub上进行查看。
这是URL：https://nicescroll.areaaperta.com
接下来我们欣赏一波吧！
*请认真填写需求信息，我们会在24小时内与您取得联系。
