/**
* 平滑移动滚动条
* 如果是IE就直接跳吧.慢死了.
*/
var phydgdt = function(){
this.w = document.body.scrollWidth; //滚动条的总宽度
this.h = document.body.scrollHeight; //滚动条的总高度
this.x = document.body.scrollLeft; //滚动条横向位置
this.y = document.body.scrollTop; //滚动条纵向位置
this.id = -1;
this.list = [];
this.isIE = !+ [ 1, ] ? true : false;
}
phydgdt.prototype = {
start : function(type,to){
if(this.id != -1){
this.list.push({type:type,to:to});
return "等待";
}
this.bool = to > (type === "x" ? this.x : this.y); //是用加还是用减
this.sd = 15; //每次移动的大小
this.time = 1;
if(to < 0)to = 0;
if(this.isIE){ //IE直接条
if(this.type === "x"){
scrollTo(to,this.y);
}else{
scrollTo(this.x,to);
}
fddiv.update();
this.stop();
return;
}
this.id = setInterval((function(param) {
return function() {
if(param.type === "x"){
if(param.bool){
param.x += param.sd;
if(param.x < to){
scrollTo(param.x,param.y);
}else{
scrollTo(to,param.y);
param.stop();
}
}else{
param.x -= param.sd;
if(param.x > to){
scrollTo(param.x,param.y);
}else{
scrollTo(to,param.y);
param.stop();
}
}
}else{
if(param.bool){
param.y += param.sd;
if(param.y < to){
scrollTo(param.x,param.y);
}else{
scrollTo(param.x,to);
param.stop();
}
}else{
param.y -= param.sd;
if(param.y > to){
scrollTo(param.x,param.y);
}else{
scrollTo(param.x,to);
param.stop();
}
}
}
fddiv.update();
}
})(this), this.time)
},
stop : function(){
if(this.id != -1){
clearInterval(this.id);
this.id = -1;
}
this.x = document.body.scrollLeft; //滚动条横向位置
this.y = document.body.scrollTop; //滚动条纵向位置
if(this.list.length > 0){
var obj = this.list[0];
this.list = this.list.slice(0,0).concat(this.list.slice(1,this.list.length));
this.start(obj.type,obj.to);
}
},
gotoObj : function( id ){
if(id){
var el = document.getElementById(id);
var tl = el.offsetTop - 8;
this.start("y",tl);
}
}
};
//使用方法
var pdt = new phydgdt();
pdt.gotoObj("对象ID");
分享到:
相关推荐
确保在窄屏设备或移动设备上,滚动条仍然易于使用和视觉上协调,可能需要调整滚动条的宽度和样式。 6. **兼容性处理**: 不同浏览器对滚动条的支持程度不同,因此需要编写兼容性代码。例如,使用`getComputedStyle...
【标题】"js图片左右滚动条切换.zip"所包含的知识点主要是关于JavaScript(JS)实现的图片滚动条交互效果,这种效果通常用于图片相册或展示类网站,以提供用户友好的图片浏览体验。在现代网页设计中,动态且可自定义...
在讨论JavaScript (JS) 实现滚动条平滑移动的技术时,需要理解几个核心的Web开发概念。首先,JS是使网页具有交互性的核心脚本语言,它能够控制和操作HTML和CSS,实现动态效果。其次,HTML(超文本标记语言)用于构建...
在JavaScript和jQuery的世界里,有时候我们可能需要在页面设计中隐藏滚动条,以达到更加美观或者特定的视觉效果。然而,隐藏滚动条并不意味着要牺牲滚动功能,通过一些技巧,我们依然可以让用户通过滚轴来查看页面...
总之,“滚动条平滑滚动置顶&贴壁滚动层”是一种提升网页用户体验的技术,通过CSS和JavaScript的结合使用,实现平滑滚动、固定定位和粘性滚动效果,提供更加流畅、直观的浏览体验。在开发过程中,需要兼顾功能实现、...
同时,我们还可以使用JavaScript库,如Perfect Scrollbar或SimpleBar,它们提供更高级的滚动条定制功能,可以在隐藏滚动条的同时提供平滑滚动效果。 在实际应用中,考虑到浏览器兼容性和用户习惯,通常会结合使用...
对于"支持各种回调"这一点,这意味着开发者可以监听滚动事件,当滚动条发生移动时触发特定函数。例如,你可以设置在滚动到底部时加载更多内容,或者在滚动到某个特定位置时执行特定操作。常见的滚动事件有`scroll`,...
2. **监听外部滚动条事件**:为外部的滚动容器(如div)添加滚动事件监听器,当外部滚动条移动时触发相应函数。 3. **同步iframe内部滚动位置**:在事件处理函数中,根据外部滚动条的位置,使用JavaScript设置...
标题“用js自定义滚动条样式(可使用图片哦)”正是指向这样一个技术主题,即如何利用JavaScript和CSS来定制具有个性化外观的滚动条,特别是通过使用图片来增强其视觉效果。 滚动条是网页中非常常见的一种元素,它...
【标题】"简单JS随滚动条滚动导航"所涉及的知识点主要集中在JavaScript的事件监听、DOM操作以及CSS样式实现上。这种类型的导航栏通常用于网页设计中,它能随着用户滚动页面而改变位置,始终保持在可见区域,为用户...
视口是用户可见的网页部分,移动滚动条实际上是改变了视口的位置。在移动设备上,视口的概念尤为重要,因为设备宽度有限,需要通过CSS的`meta viewport`标签来设置视口大小,以优化移动端显示。 综上所述,解决大...
2. **JavaScript插件**:对于不支持CSS自定义滚动条的浏览器,我们可以借助JS库或插件,如`Perfect Scrollbar`、`SimpleBar`或`malihu custom scrollbar`。这些插件通过JavaScript实现滚动条的渲染和事件监听,从而...
5. **JavaScript操作**:使用JavaScript,开发者可以实现滚动条的动态效果,如平滑滚动、滚动事件监听等。例如,当用户滚动到页面某个位置时,可以触发特定功能。 6. **响应式设计**:在移动设备上,屏幕尺寸有限,...
《jQuery.mCustomScrollbar:打造个性化的滚动条体验》 在网页设计中,滚动条作为页面内容超出可视区域时的重要导航工具,其外观和交互性往往影响着用户的浏览体验。jQuery.mCustomScrollbar是一款强大的自定义滚动...
当需要控制div元素中的滚动条滚动到特定位置时,jQuery提供了一个简单易用的方法。本篇文章将深入探讨如何利用jQuery实现这一功能。 首先,我们需要了解几个基本概念: 1. **div**: 在HTML中,div(division)是一...
jQuery作为一款强大的JavaScript库,提供了许多优秀的滚动条插件,使得滚动条不仅具有基本的滚动功能,还能实现各种酷炫效果,如自定义样式、翻页效果、图片滚动等。本篇文章将详细介绍几款jQuery滚动条插件及其特色...
CSS3的动画功能允许我们创建动态效果,如图片的平滑移动。`@keyframes`规则定义了动画的关键帧,然后通过`animation`属性应用到目标元素上。例如,创建一个图片随着鼠标移动的动画: ```css @keyframes moveImage { ...
为了优化用户体验,可以采用一些滚动相关的JavaScript库或插件,如jQuery ScrollPath或fullPage.js,它们能实现平滑滚动、滚动监听等功能,增强页面的动态效果和互动性。 此外,对于移动设备,由于屏幕尺寸较小,大...
1. **滚动条样式自定义**:你可以指定滚动条的外观,包括轨道的颜色、宽度、形状,以及滑块(即实际移动的部分)的样式。甚至可以使用图片作为背景,实现更加个性化的视觉效果。 2. **动态效果**:jQuery的动画功能...
在滚动条案例中,开发者可能使用JavaScript来实现更高级的功能,如平滑滚动、滚动监听、滚动事件处理等。例如,以下代码可以实现平滑滚动: ```javascript function smoothScroll(target) { const speed = 50; // ...