zoukankan      html  css  js  c++  java
  • 工具之scroolToIndex

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

    解决方案:查找该子元素的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',
    });
  • 相关阅读:
    Cocos2d-JS中的Sprite精灵类
    Cocos2d-JS中的精灵菜单和图片菜单
    Cocos2d-JS中的文本菜单
    SpringMVC01
    xml文件
    MyEclipse保存文件时 自动格式化代码! 不包括文档注释
    MyEclipse修改servlet模版
    java05 选择结构
    ssh注解开发
    使用socket实现聊天功能
  • 原文地址:https://www.cnblogs.com/ympjsc/p/12313058.html
Copyright © 2011-2022 走看看