scroll-into-view, 如果可能,将元素滚动到视图中

分享于 

4分钟阅读

GitHub

  繁體 雙語
Scrolls an element into view if possible
  • 源代码名称:scroll-into-view
  • 源代码网址:http://www.github.com/KoryNunn/scroll-into-view
  • scroll-into-view源代码文档
  • scroll-into-view源代码下载
  • Git URL:
    git://www.github.com/KoryNunn/scroll-into-view.git
    Git Clone代码到本地:
    git clone http://www.github.com/KoryNunn/scroll-into-view
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/KoryNunn/scroll-into-view
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    scroll-into-view

    什么

    将元素滚动到视图中

    同时滚动任何滚动父对象,使该元素处于视图中。

    捐赠

    如果你想在财务上显示你的支持,我是在 Patreon

    示例

    示例

    需要它

    var scrollIntoView =require('scroll-into-view');

    使用它

    scrollIntoView(someElement);

    可以通过设置来控制时间,缓动,以及父是否是滚动的有效元素以及对齐方式:

    所有选项都是可选的。

    scrollIntoView(someElement, {
     time:500, // half a secondease:function(value){
     returnMath.pow(value,2) - value; // Do something weird. },
     validTarget:function(target, parentsScrolled){
     // Only scroll the first two elements that don't have the class"dontScroll"// Element.matches is not supported in IE11, consider using Element.prototype.msMatchesSelector if you need to support that browserreturn parentsScrolled <2&& target !==window&&!target.matches('.dontScroll');
     },
     align:{
     top:0 to 1, default 0.5 (center)
     left:0 to 1, default 0.5 (center)
     topOffset: pixels to offset top alignment
     leftOffset: pixels to offset left alignment
     },
     isScrollable:function(target, defaultIsScrollable){
     // By default scroll-into-view will only attempt to scroll elements that have overflow not set to `"hidden"` and who's scroll width/height is larger than their client height.// You can override this check by passing an `isScrollable` function to settings:returndefaultIsScrollable(target) ||~target.className.indexOf('scrollable');
     }
    });

    你可以传递一个在所有滚动完成或者取消时调用的回调。

    scrollIntoView(someElement [, settings], function(type){
     // Scrolling done.// type will be 'complete' if the scroll completed or 'canceled' if the current scroll was canceled by a new scroll});

    大小

    独立的小型 ~3.03 KB。

    测试

    测试滚动真的很难,没有类似 web,的内容,但是现在有什么可以用的了。

    这些测试将尝试启动谷歌 chrome。 如果你没有 Chrome,lol只是开玩笑。

     
    npm run test
    
    
    
     
    独立

    如果你想不使用browserify来使用这个模块,你可以使用 scrollIntoView.min.js

    
    <script src="scrollIntoView.min.js"></script>
    
    
    
    <script>
    
    
     window.scrollIntoView(someElement);
    
    
    </script>
    
    
    
    

    VIEW  pos  滚动