页面中有一些名为righttext的class元素从上到下排列。写一个js脚本在屏幕右侧创建上下两个悬浮按钮点击之后可以滚动切换到与当前元素相邻的元素。设定一个参考点比如屏幕中间定义这里之上最近的元素为当前的元素点击按钮时重新识别。说出几种思路加上分析如性能和可行性
思路一:
- 获取所有名为righttext的class元素的位置信息。
- 根据参考点位置,计算出当前元素。
- 创建两个悬浮按钮,并绑定点击事件。
- 点击按钮时,根据当前元素,计算出相邻的元素,并滚动到该元素位置。
该思路的可行性较高,但是需要获取所有元素的位置信息,对于页面元素较多的情况,性能可能会有一定影响。
思路二:
- 获取屏幕可视区域内的所有名为righttext的class元素。
- 根据参考点位置,计算出当前元素。
- 创建两个悬浮按钮,并绑定点击事件。
- 点击按钮时,重新获取可视区域内的元素,并计算出相邻的元素,并滚动到该元素位置。
该思路相对于思路一,减少了获取所有元素位置信息的开销,但是每次点击按钮都需要重新获取可视区域内的元素,对于页面元素较多的情况,性能可能会有一定影响。
思路三:
- 获取所有名为righttext的class元素的位置信息。
- 根据参考点位置,计算出当前元素。
- 创建两个悬浮按钮,并绑定点击事件。
- 点击按钮时,根据当前元素,通过二分法或其他算法,计算出相邻的元素,并滚动到该元素位置。
该思路相对于思路一和二,减少了每次重新获取元素的开销,但是需要通过算法计算出相邻的元素,对于页面元素较多的情况,性能可能会有一定影响。同时,算法的实现也需要考虑到边界问题,保证正确性
原文地址: https://www.cveoy.top/t/topic/g8ve 著作权归作者所有。请勿转载和采集!