Question

我的网页上有一个区域，显示了几个月的人口数据，按月传播。

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

当我尝试在我的应用程序中集成AngularJS时，我尝试使用：

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

请参阅此更新的plunker：http://plnkr.co/edit/v6QBOq3rrBkcOLhLwFme?p=preview

这在向上和向下滑动时效果很好，但我可以调整以便用户可以从左向右滑动吗？

更新

我试图从这里复制harnishdesign帖子中的“带按钮和大写字母的水平滚动”示例：http://jscrollpane.kelvinluck.com/caps.html

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

然而滚动不起作用。

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

Answer 1

您需要使用Popular jscrollpane进行自定义滚动条。 jscrollpane中提供了许多选项。

http://jscrollpane.kelvinluck.com/

Answer 2

请参阅我不想错过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}

Answer 3

您可以尝试jQuery Scrollbar可以与AngularJS集成，如Angular Demo页面所示。

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

如果您需要使用鼠标滚轮水平滚动内容，请查看此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回调中应用此代码。

从左到右滚动

3 个答案: