scroll_Left 和 scroll_Top
function scroll_Left(tar_x){
var timer = setTimeout(function(){
var current_x = document.body.scrollLeft
step = 40
if (tar_x>current_x){
var dist = Math.ceil((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x<tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
window.scrollTo(next_x,0)
//clearTimeout(timer)
}
}
else{
var dist = Math.floor((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x>tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
window.scrollTo(next_x,0)
//clearInterval(timer)
}
}
},1)
}
function scroll_Top(tar_y){ //tar_y 即滑动条顶端 距离页面最上面的距离
//console.log('oooooooo')
var timer = setTimeout(function(){
var current_y = document.body.scrollTop
//console.log(current_y)
step = 40 //步长系数 即剩余的距离除以40 每1ms 移动一段距离
if (tar_y>current_y){ //tar_y > current_y 即向下滚动
var dist = Math.ceil((tar_y-current_y)/step)
var next_y = current_y+dist
if(next_y<tar_y){ //向上滚动和向下滚动判定的区别 是这里！！
window.scrollTo(0,next_y)
scroll_Top(tar_y)
console.log('do down')
}
else{
window.scrollTo(0,tar_y)
//clearTimeout(timer)
}
}
else{ //tar_y < current_y 即向上滚动
var dist = Math.floor((tar_y-current_y)/step)
var next_y = current_y+dist
if(next_y>tar_y){
window.scrollTo(0,next_y)
scroll_Top(tar_y)
console.log('do up')
}
else{
window.scrollTo(0,tar_y)
//clearInterval(timer)
}
}
},1)
}
**结合 zepto 做的 手势左右 滑动 轮播
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name='apple-touch-fullscreen' content='yes'/>
<meta name="full-screen" content="yes"/>
<script src="./zepto.min.js"></script>
<script src="./g.js?23"></script>
</head>
<body>
<script language="javascript">
<!--
;(function($){
var winWidth = $(window).width();
var startX = 0;
var startLeft = 0;
//alert(winWidth)
$(document).on("touchstart",function(obj){
startX = obj.changedTouches["0"].clientX;
startLeft = document.body.scrollLeft;
if(startLeft < winWidth){
startLeft = 0;
}else{
startLeft = winWidth;
}
});
$(document).on("touchend",function(obj){
if(((obj.changedTouches["0"].clientX) - startX) > 100 ){
scroll_Left_prt(0);
}else if(startX - ((obj.changedTouches["0"].clientX)) > 100 ){
scroll_Left_prt(winWidth);
}else{
scroll_Left_prt(startLeft);
}
});
})(Zepto);
//-->
</script>
<style type="text/css">
*{margin:0px;padding:0px}
table{background:red;}
table td{width:10%;text-align:center}
</style>
<table width="200%" height="100%" id="tb" cellspacing="0" cellpadding="0" border="0">
<tr style="width:100%">
<td id="f">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>
g.js -- 解决 连续两次操作时 遇到的冲突 。 在外面包括了一个 function 和 加了个全局变量 判断状态
var scrolll_stop = false;
function scroll_Left_prt(tar_x){
if(scrolll_stop == true){return;}
scrolll_stop = true;
scroll_Left(tar_x);
}
function scroll_Left(tar_x){
var timer = setTimeout(function(){
var current_x = document.body.scrollLeft
step = 10;//值越小，滚动越快
if (tar_x>current_x){
var dist = Math.ceil((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x<tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
scrolll_stop = false;
window.scrollTo(next_x,0)
//clearTimeout(timer)
}
}
else{
var dist = Math.floor((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x>tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
scrolll_stop = false;
window.scrollTo(next_x,0)
//clearInterval(timer)
}
}
},1)
}
相关推荐
- **jQuery插件**：jQuery提供了一些插件，如`jScrollPane`和`Perfect Scrollbar`，它们允许开发者创建完全自定义的滚动条效果，包括平滑滚动、自定义滚动条形状和动画。 - **原生JS库**：例如`SimpleBar`，它是一...
原生JS（JavaScript）滚动条插件能够帮助开发者自定义和美化浏览器的默认滚动条，使其符合网站的整体风格。本资源包“原生js scrollbars滚动条插件设置浏览器竖直滚动条美化”提供了一套解决方案，专用于竖直滚动条...
总结来说，JS原生实现滚动条效果主要涉及监听滚动事件、获取和改变滚动位置、自定义滚动条样式以及模拟滚动条和滚动动画。通过这些技术，开发者可以创建出更具个性化的滚动体验，满足不同项目的需求。
在现代网页设计中，用户体验是至关重要的因素之一，而滚动条作为用户与页面...通过结合CSS3和JavaScript，我们可以定制滚动条的样式、大小、颜色，甚至添加动画效果，以适应不同网站的设计风格，提升用户的浏览体验。
2. **CSS样式**：隐藏原生滚动条，为自定义滚动条创建样式。使用`width: 0;`和`opacity: 0;`可以隐藏原生滚动条。 ```css .scroll-container::-webkit-scrollbar { width: 0; } .scroll-container { scrollbar...
"JS模仿横向滚动条"这个主题，就是利用JavaScript来创建一个自定义的、模仿原生浏览器滚动条的行为，以提供更美观或者更符合设计需求的用户体验。 在传统的HTML页面中，滚动条是浏览器默认提供的，其样式和行为由...
标题中的“一款效果很不错的JS滚动条”指的是一个JavaScript实现的滚动条插件或库，它提供了优于浏览器默认滚动条的视觉效果和交互体验。在网页设计中，滚动条是必不可少的元素，尤其是在内容丰富的页面上，它帮助...
通过编写JavaScript代码，我们可以精确控制滚动条的行为，如滑动速度、触发动画等，同时，还能实现跨平台的兼容性，确保在不同设备上一致的表现。 对于"支持各种回调"这一点，这意味着开发者可以监听滚动事件，当...
然后，为这个容器添加一个隐藏的原生滚动条，通过JavaScript来控制其显示和隐藏。 2. **JavaScript实现滚动条**： 使用JavaScript，我们可以监听滚动事件，例如`onscroll`，然后根据滚动位置更新我们自定义滚动条...
例如，我们可以创建自定义的滚动条元素，用JavaScript监听滚动事件，然后通过改变这些元素的位置和状态来模拟原生滚动条的行为。 3. **动态效果**：JavaScript可以添加动画效果到滚动条上，如平滑滚动。例如，`...
在处理滚动条动画时，为了确保流畅性，可以利用`requestAnimationFrame`来避免不必要的重绘和回流。同时，使用`throttle`和`debounce`函数来限制滚动事件的频率，防止性能问题。 ```javascript function throttle...
1. 隐藏原生滚动条：通过CSS设置`overflow`属性为`hidden`，隐藏浏览器默认的滚动条。 2. 创建自定义滚动条：利用HTML和CSS创建滚动条的外观，可以是任何元素，如`div`或`span`。 3. 添加滚动事件：通过JavaScript...
这个博客链接可以作为进一步学习和理解JavaScript原生滚动条实现的资源。 总结来说，JavaScript原生代码实现滚动条涉及到对DOM的深入理解，以及熟练运用事件监听、样式修改和动画处理等技巧。通过`wjscroll.js`这样...
它的核心特点在于轻量化和灵活性，能够让开发者以纯JS的方式实现滚动条的个性化设计，同时避免了对原生滚动条的干扰。 在网页设计中，滚动条虽然看似微不足道，但其样式和交互体验却直接影响到用户的浏览感受。原生...
在JavaScript中，"js三级滚动条"通常是指在网页中实现多级嵌套的滚动条效果，例如在导航菜单、树形结构或者长列表中。这样的功能可以增强用户体验，使得大量数据的展示更加有序和易操作。下面我们将深入探讨如何在...
这个标题表明我们将讨论如何利用Jquery这一强大的JavaScript库来创建炫丽的滚动条效果。 Jquery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。通过Jquery，开发者可以...
除了操作原生滚动条，JavaScript还可以实现自定义的滚动动画。通过定时器（如`requestAnimationFrame`）和计算差值，可以创建平滑的滚动效果。例如，实现一个向下滑动的动画： ```javascript function ...
在开始模拟之前，我们需要隐藏浏览器的原生滚动条。这可以通过CSS实现，例如： ```css .scrollable { overflow: hidden; /* 隐藏横向和纵向滚动条 */ scrollbar-width: none; /* 针对Firefox */ -ms-overflow-...
- `iOSNativeScrolling`：在 iOS 设备上是否使用原生滚动，值为布尔类型。 - `alwaysVisible`：滚动条是否始终可见，值为布尔类型。 - `flashDuration`：滚动条高亮显示的时间，单位为毫秒。 配置选项可以通过初始...
由于我们希望达到“无缝”效果，所以在最后一张图片滚动出去的同时，第一张图片需要重新出现在容器的另一端，这样用户就不会感觉到图片的切换，而是像一个连续的滚动条一样。 原生JavaScript实现图片无缝滚动，主要...