Wu Yudong's Blog

假如这样的业务场景：有一个wrap滚动容器，wrap的内容区content的高度超过wrap的高度，则出现纵向滚动条。随意拖动滚动条到某个位置，要判断content里面的子元素input输入框是否在可视区内，若不在可视区内，自动拖动滚动条，使其进入可视区。这样的业务场景其实经常有遇到。

项目中使用的是editormd生成的目录，目录的active item可以随着浏览器的滚动改变，但是如果目录也带滚动条，就需要添加代码来实现目录隐藏的active item显示出来

具体实现方法：

    $(document).ready(function(){
        $('body').scrollspy({ target: '.markdown-toc' });
        // 监听ScrollSpy更新事件
        var lastScrollTop = 0;
        $('body').on('activate.bs.scrollspy', function () {

            // 获取激活的目录项
            var active_item = $('.markdown-toc .nav li.active a');

            var currentScrollTop = $("html,body").scrollTop();

            if (currentScrollTop > lastScrollTop) { //向下滚动
                if(active_item.offset().top > $('.catalog-body').height() / 2) {
                    $('.catalog-body').animate({
                        scrollTop: $('.catalog-body').scrollTop() + 34
                    }, 500);
                }
            } else {  //向上滚动
                if(active_item.offset().top > $('.catalog-body').height() / 2) {
                    $('.catalog-body').animate({
                        scrollTop: $('.catalog-body').scrollTop() - 34
                    }, 500);
                }
            }
            lastScrollTop = currentScrollTop;
        });
    });