从左到右滚动

我的网页上有一个区域显示了几年的人口数据，以逐月分布显示。从左到右滚动

我想要做的是创建一个小滑块/滚动条，以便用户可以从左到右滚动以查看数据。

正如我想我的应用程序内AngularJS整合，我已经尝试使用：

https://github.com/asafdav/ng-scrollbar

看到这个更新plunker：上下滑动时http://plnkr.co/edit/v6QBOq3rrBkcOLhLwFme?p=preview

这个伟大的工程，但可我可以适应，以便用户可以从左向右滑动？

UPDATE：

我试图复制示例 “按钮和盖子水平滚动” 从这里harnishdesign后发现：http://jscrollpane.kelvinluck.com/caps.html

我的小提琴：http://jsfiddle.net/F6dk5/

但是，滚动不起作用。

$(function() { 
    $('.scroll-pane').jScrollPane({ 
     showArrows: true, 
     horizontalGutter: 30, 
     verticalGutter: 30 
    }); 
});

来源

2014-05-15 Oam Psy

看看我的回答 –

您需要为自定义滚动条使用热门的jscrollpane。 jscrollpane提供了许多选项。

http://jscrollpane.kelvinluck.com/

来源

2014-05-15 09:09:41 HarnishDesign

看我的更新 –

你有没有添加jScrollPane脚本？请参阅如何使用 - http://jscrollpane.kelvinluck.com/index.html#usage – HarnishDesign

见我不喜欢丢失了JQuery与AngularJS

就在这个美丽的东西Don't augment jQuery with AngularJS

可以实现垂直和水平滚动条等作为所示看看下面。

Working Demo

HTML

<div class="scrollbar-container"> 
    <div class="inner"> 
     <p>Content Here........</p> 
    </div> 
</div>

CSS

.scrollbar-container { 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
    margin: 20px; 

    border: 4px solid rgba(0, 0, 0, 0.2); 
    overflow: auto; 
    background-color: whiteSmoke; 
} 
.scrollbar-container .inner { 
    height: 2011px; 
    padding: 1em; 
    background-color: white; 
    font-family: sans-serif; 
} 

::-webkit-scrollbar { 
    background: transparent; 
    border: rgba(0, 0, 0, 0.2) solid; 
} 
::-webkit-scrollbar:vertical { 
    border-width: 0 0 0 1px; 
    width: 11px; 
} 
::-webkit-scrollbar-corner { 
    background: transparent; 
} 

/* These rules are for scrollbar draggable panel */ 
::-webkit-scrollbar-thumb { 
    background-color: rgba(0, 0, 0, 0.2); 
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset; 
} 
::-webkit-scrollbar-thumb:hover { 
    background-color: rgba(0, 0, 0, 0.3); 
} 
::-webkit-scrollbar-thumb:active { 
    background-color: rgba(0, 0, 0, 0.5); 
} 

/* These rules are for buttons */ 
::-webkit-scrollbar-button:start{display:none} 
::-webkit-scrollbar-button:end{display:none}

来源

2014-05-15 09:35:05

谢谢，但我尝试外部库/插件的原因是因为它允许我滚动条和按钮的样式 –

你不能你使用CSS风格的滚动条.....看看这个http://css-tricks.com/custom-scrollbars-in-webkit/在铬 –

看看这个http://jsfiddle.net/ 9hMXL/607 /镀铬 –

您可以尝试jQuery Scrollbar可以用AngularJS整合，你可以在看页面。

如果您可以看到带有overflow：auto的水平滚动条，但没有应用任何插件，则可以应用jQuery滚动条。

如果需要使用鼠标滚轮水平滚动的内容，看看这个example：

var container = $('.scrollbar-outer'); 
var scrollTo = {}, scrollToValue = 0, isScrolling = false; 
var mouseScroll = function(event){ 
    var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail; 
    var maxScrollValue = container.prop("scrollWidth") - container.parent().width() - parseInt(container.css('left')); 

    if(!((scrollToValue <= 0 && delta < 0) || (scrollToValue >= maxScrollValue && delta > 0))){ 
     scrollToValue = scrollToValue + delta; 
     if(scrollToValue < 0) 
      scrollToValue = 0; 
     if(scrollToValue > maxScrollValue) 
      scrollToValue = maxScrollValue; 

     scrollTo = scrollTo || {}; 
     scrollTo['scrollLeft'] = scrollToValue; 
     setTimeout(function(){ 
      if(scrollTo){ 
       isScrolling = true; 
       container.stop().animate(scrollTo, 240, 'linear', function(){ 
        scrollToValue = container.scrollLeft(); 
        isScrolling = false; 
       }); 
       scrollTo = null; 
      } 
     }, 1); 
    } 

    event.preventDefault(); 
    return false; 
};

您可以在AngularJS控制器onInit回调中应用此代码。

来源

2014-07-17 14:49:06 Gromo

从左到右滚动

回答

相关问题