從左到右滾動

我的網頁上有一個區域顯示了幾年的人口數據，以逐月分佈顯示。從左到右滾動

我想要做的是創建一個小滑塊/滾動條，以便用戶可以從左到右滾動以查看數據。

正如我想我的應用程序內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

從左到右滾動

回答

相關問題