最近在电视机端做一个页面显示从数据库读出的内容，遥控器无法直接触发鼠标的事件，并且手边的机顶盒的浏览器内核无法区分scrollHeight 与offsetHeight,不管在什么情况下，两者的值都是一样的改变scrollTop的值无法达到滚动内容的目的，所以只好另外寻找解决办法，在一个同事的提醒下，找到了下面这种解决办法，可以达到使用滚动条的效果， 通过绑定按键来达到效果，绑定的方法就是下面的changePage()的方法。 下面直接贴上页面的代码，部分绑定按键的代码已省略
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="gb2312" />
<title>无标题文档</title>
<script src="../site125/global.js"></script>
<script>
var pageHight = 0;
var currPage = 1;
var totalPage = 1;
var scrollBar;
function init(){
//showTime();
initContentlen();
}
function $(id)
{
return document.getElementById(id);
}
function initContentlen(){
//得到一页内容的高度
pageHight = parseInt($("contentDiv").offsetHeight);
var contentHeight = parseInt($("content").offsetHeight);
//设置div的位置属性为绝对位置，否则达不到效果
$("content").style.position="absolute";
$("content").style.top="0px";
//得到全部内容的高度
totalPage = Math.ceil(contentHeight/pageHight)
}
function changePage(__num){
changeContentPage(__num);
}
function changeContentPage(__num){
//如果只有一页则不会做任何操作
if(totalPage == 1) return;
currPage += __num;
//如果到达最后一页时再点击下则停留在最后一页
if(currPage > totalPage) currPage = totalPage;
//如果到达第一页时在点击上则停留在第一页
else if(currPage < 1) currPage = 1;
//关键代码这句代码控制显示的内容
$("content").style.top = -(currPage-1)*pageHight+"px";
}
</script>
</head>
<body onload="init();">
<div id="contentDiv" style="position:absolute; left:15px; top:79px; width:1173px; height: 447px; border:1px solid red; overflow:hidden; font-size:22px; color:#232323; line-height:41px;">
<div id="content" style="height:auto;font-size:22px; color:#232323; line-height:41px;">
发反反复复滚动条模拟实在基本JS拖拽基础上的加深。
滚动条需要做的是1.滚动条的拖拽，以及内容滚动高度的改变。
2.上下按钮点击效果以及内容高度改变。
3.鼠标滚轮在内容中滚动时内容高度改变，以及滚动条的高度改变。
我把这种模拟滚动条分成两类，
一类是内容属性为overflow：hidden的
，重点在于上文所说的第三点，
如果是hidden属性的话，滚轮在页面内容里滚动是不会触发onscroll事件的，
需要给鼠标滚轮绑定事件，而鼠标滚轮事件在IE中是onmousewheel，
在DOM中是DOMMouseScroll，后者还需要addEventListener来添加，非常的麻烦，
这里第二种更加简单易于理解的方法。第二类就是overflow：scroll的，
当然只是在JS中内容超过高度或者宽度了再设置X，或Y方向的scroll。
这种方法在内容框边上会有个自动生成的滚动条，你可以用背景，
或者用你自己做的滚动条样式覆盖上去，这种方法的话上文说的第三点只需要在内容中绑定onscroll事件即可，
不必处理浏览器的兼容性
滚动条模拟实在基本JS拖拽基础上的加深。
滚动条需要做的是1.滚动条的拖拽，以及内容滚动高度的改变。
2.上下按钮点击效果以及内容高度改变。
3.鼠标滚轮在内容中滚动时内容高度改变，以及滚动条的高度改变。
我把这种模拟滚动条分成两类，
一类是内容属性为overflow：hidden的
，重点在于上文所说的第三点，
如果是hidden属性的话，滚轮在页面内容里滚动是不会触发onscroll事件的，
需要给鼠标滚轮绑定事件，而鼠标滚轮事件在IE中是onmousewheel，
在DOM中是DOMMouseScroll，后者还需要addEventListener来添加，非常的麻烦，
这里第二种更加简单易于理解的方法。第二类就是overflow：scroll的，
当然只是在JS中内容超过高度或者宽度了再设置X，或Y方向的scroll。
这种方法在内容框边上会有个自动生成的滚动条，你可以用背景，
或者用你自己做的滚动条样式覆盖上去，这种方法的话上文说的第三点只需要在内容中绑定onscroll事件即可，
不必处理浏览器的兼容性
滚动条模拟实在基本JS拖拽基础上的加深。
滚动条需要做的是1.滚动条的拖拽，以及内容滚动高度的改变。
2.上下按钮点击效果以及内容高度改变。
3.鼠标滚轮在内容中滚动时内容高度改变，以及滚动条的高度改变。
我把这种模拟滚动条分成两类，
一类是内容属性为overflow：hidden的
，重点在于上文所说的第三点，
如果是hidden属性的话，滚轮在页面内容里滚动是不会触发onscroll事件的，
需要给鼠标滚轮绑定事件，而鼠标滚轮事件在IE中是onmousewheel，
在DOM中是DOMMouseScroll，后者还需要addEventListener来添加，非常的麻烦，
这里第二种更加简单易于理解的方法。第二类就是overflow：scroll的，
当然只是在JS中内容超过高度或者宽度了再设置X，或Y方向的scroll。
这种方法在内容框边上会有个自动生成的滚动条，你可以用背景，
或者用你自己做的滚动条样式覆盖上去，这种方法的话上文说的第三点只需要在内容中绑定onscroll事件即可，
不必处理浏览器的兼容性
</div>
</div>
<input type="button" value="up" onclick="changePage(-1)">
<input type="button" value="down" onclick="changePage(1)">
</body>
</html>
相关推荐
总之，通过JavaScript模拟滚动条，我们可以实现跨浏览器的个性化滚动体验，同时结合CSS3的样式定制，可以创造出符合网站设计风格的独特滚动条，提升用户体验。不过，需要注意的是，过度复杂的滚动条可能会影响页面...
总的来说，使用JavaScript模拟滚动条涉及到HTML布局、CSS样式和JavaScript事件处理等多个方面。虽然实现起来相对复杂，但能够带来更好的设计灵活性和用户体验。在实际项目中，可以参考现有的库，如Perfect Scrollbar...
通过以上步骤，我们可以构建一个功能齐全、视觉效果良好的JavaScript模拟滚动条，同时还能应对内容动态变化的情况。这个过程需要对JavaScript和CSS有深入的理解，以及良好的编程习惯，以确保代码的可维护性和性能。
"很好的jq模拟滚动条"是一个专门针对jQuery库开发的插件，它提供了一种自定义和美化滚动条的方法，以增强网页的视觉效果和用户体验。 jQuery，简称jq，是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历...
在网页设计中，有时我们需要自定义滚动条的样式以使其更符合网站的整体风格。...在实际项目中，可以进一步扩展这个示例，结合JavaScript和CSS3动画来实现更复杂、更动态的滚动条效果，提升用户体验。
"模拟滚动条"这个主题涉及的技术点主要包括CSS3、JavaScript（特别是jQuery或更现代的库如Vue.js、React.js）以及可能的插件应用。 首先，我们来了解一下什么是滚动条。滚动条是用户界面中的一个重要元素，用于在...
4. **响应用户交互**：通过JavaScript监听滚动事件，例如`scroll`事件，来更新模拟滚动条的位置。根据实际滚动位置，调整模拟滚动条滑块的CSS属性，如`transform`或`left/top`，使其与实际滚动保持同步。 5. **添加...
本主题聚焦于"jQuery实现模拟滚动条插件版"，这是一个能够自定义网页滚动条外观和行为的工具。通过使用这样的插件，开发者可以为网站提供更加个性化和一致的用户体验。 首先，我们需要理解jQuery的基本用法。jQuery...
总的来说，"JS模仿横向滚动条"涉及的知识点包括JavaScript事件监听、DOM操作、CSS样式定制、以及动画效果的实现。通过这些技术的结合运用，开发者可以创建出既美观又具有交互性的自定义滚动条，提升网页的用户体验。
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。 代码未整理，...
本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考，具体如下： 使用Js模拟滚动条。简易模式，类似手机上常见的滚动条。 效果如下： Js代码如下： var scrollMoveObj = null, scrollPageY = 0, ...
3. Nicescroll：提供模拟滚动条，可以替换默认的浏览器滚动条，支持自定义颜色和动画效果。 4. malihu custom scrollbars：提供了大量的选项和设置，可以创建高度定制的滚动条，包括鼠标滚轮和触摸设备的支持。 三...
传统的滚动条样式通常是浏览器默认的，但随着Web开发技术的发展，开发者现在可以通过JavaScript实现自定义滚动条，以提升网页的用户体验和视觉效果。本文将深入探讨JS自定义滚动条的相关知识点，包括其原理、实现...
创建覆盖在`textarea`上的透明div，监听滚动事件，手动调整div的位置以模拟滚动条效果。这种方法较复杂，需要考虑更多的边界情况和性能优化。 4. **浏览器检测与条件样式** 可以使用JavaScript检测浏览器类型，...
总结来说，JS原生实现滚动条效果主要涉及监听滚动事件、获取和改变滚动位置、自定义滚动条样式以及模拟滚动条和滚动动画。通过这些技术，开发者可以创建出更具个性化的滚动体验，满足不同项目的需求。
通过JavaScript模拟滚动条不仅可以提高页面的美观度，还可以实现更复杂的交互效果。本文介绍了如何使用JavaScript结合CSS来实现横向和纵向的滚动条，包括关键的技术点和实现思路。希望这些内容能够帮助开发者更好地...
漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用
比如`perfect-scrollbar`、`malihu-custom-scrollbar-plugin`等，这些库通过JavaScript模拟滚动条，可以提供高度自定义的滚动体验，同时处理好不同浏览器的兼容问题。 例如，`perfect-scrollbar`的使用方法如下： ...