实现思路1

"实现思路1" 本资源摘要信息主要介绍了 JavaScript 实现拖动水平条、滚动条、固定导航栏、模拟垂直滚动条布局等多个知识点。 1. 拖动水平条： 实现思路：使用 offset 家族和 event 属性 clientX 实现拖动效果。布局思路：一个大盒子里面包含着两个小盒子，分别是用来动态显示宽度（mask）和用做拖动手柄（bar）。两个小盒子都用绝对定位方式设置位置。Js 实现思路：当拖动事件是当鼠标先按下 onmousedown 然后在注意是在文档范围内移动时 document.onmousemove 触发的，这里就是当手柄被按下并且鼠标移动时会触发拖动事件。 2. 滚动条： 实现思路：使用 Scroll 家族 ScrollTop / scrollLeft 实现滚动效果。ScrollTop 是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方/左边的距离。 3. 固定导航栏： 实现思路：当 scrollTop 值大于等于导航栏的 offsetLeft 值时，将导航栏设置为固定定位，当小于 offsetLeft 值时恢复绝对定位。 4. 模拟垂直滚动条布局： 实现思路：一个大盒子里面包着两个小盒子分别是内容盒子 content 和右边滑动条 scroll。利用定位将它们放在相应的位置。右边滑动条盒子里面还包着的是手柄 bar 盒子。Js 实现思路： 首先实现 bar 的拖动效果。但是需要注意的一点是滑块的高度是不确定的，滑动的高度应该根据内容的高度来和滑动条的高度确定。 5. 事件： 实现思路：使用 onscroll 事件实现滚动效果。主要实现思路就是广告的 top 值等于 scrollTop 值。回到顶部小火箭 当 window.onscroll 时小火箭出现，当点击小火箭时采用动画的方式回到顶部，就是设置 scrollTo。 6.冒泡问题： 实现思路：使用 stopPropagation() 方法来取消冒泡事件。在点击空白隐藏的案例中，如果不取消冒泡在点击登录按钮的时候冒泡到了最外层 document。 本资源摘要信息涵盖了多个 JavaScript 知识点，包括拖动水平条、滚动条、固定导航栏、模拟垂直滚动条布局等，都是 JavaScript 开发中常用的技术。