首页 > 其他 > 详细

工具之scroolToIndex

时间:2020-02-15 19:16:32      阅读:67      评论:0      收藏:0      [点我收藏+]

需求定位:导航中实现子元素滚动到父元素的最左侧

解决方案:查找该子元素的offsetLeft值,然后让父元素滚动offsetLeft,parenDom.scrollLeft = childDom.offsetLeft

在vue原型上定义scrollToIndex函数

 prototype.js

/**
 * 滚动到index
 * @param option = {
 *  parentsDom //父元素 dom
 *  childDom   //子元素 dom
 * }
 */
Vue.prototype.scrollToIndex = function (options = {}) {
  let width = 0;
// 在全局找到
const el = document.getElementsByClassName(options.parentsDom), defaults = setDefault(options), elChild = document.getElementsByClassName(options.childDom); if (!judgeOptions(defaults)) { return; } if (defaults.x) { width = elChild[0].offsetLeft; } scrollLeft(el, width); }; function setDefault(options) { const defaults = { parentsDom: ‘‘, childDom: ‘‘, x: true, y: false, }; return Object.assign({}, defaults, options); } function judgeOptions(options) { console.log(options, ‘options‘); if (typeof options.parentsDom !== ‘string‘ || typeof options.childDom !== ‘string‘ || document.getElementsByClassName(options.parentsDom).length === 0 || document.getElementsByClassName(options.childDom).length === 0 ) { console.warn(‘Dom必须传是className并且存在‘); return false; } return true; } function scrollLeft(el = ‘‘, width = 0) { if (!el) { return; } el[0].scrollLeft = width; }

 .vue

this.scrollToIndex({
    parentsDom: ‘J-nav-select‘,
    childDom: ‘J-nav-active‘,
});

 

工具之scroolToIndex

原文:https://www.cnblogs.com/ympjsc/p/12313058.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!