gpt4 book ai didi

angularjs - Angular + ngScrollbar

转载 作者:行者123 更新时间:2023-12-01 13:49:32 31 4
gpt4 key购买 nike

我正在尝试 Angular +滚动条 [https://github.com/iominh/ng-scrollbars ],但无法使其工作。它只是给出模块错误并显示文本。在 codepen 中它甚至不显示文本。任何帮助Plunkercodepan

<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.min.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://raw.githubusercontent.com/iominh/ng-scrollbars/master/src/scrollbars.js"></script>
<script>
var app = angular.module('app', ['ngScrollbars']);
app.config(function(ScrollBarsProvider) {
// scrollbar defaults
ScrollBarsProvider.defaults = {
autoHideScrollbar: false,
setHeight: 100,
scrollInertia: 0,
axis: 'yx',
advanced: {
updateOnContentResize: true
},
scrollButtons: {
scrollAmount: 'auto', // scroll amount when button pressed
enable: true // enable scrolling buttons by default
}
};
});

function MainController($scope) {
// example of overriding defaults per scrollbar
$scope.scrollbarConfig = {
theme: 'dark',
scrollInertia: 500
}
}

app.controller('mainCtrl', MainController);
</script>
</head>

<body ng-app="app" ng-controller="mainCtrl">

<div style="width: 200px;" ng-scrollbars ng-scrollbars-config="scrollbarConfig">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare magna ultrices tincidunt tincidunt. Donec sagittis lorem placerat iaculis vehicula. Nunc bibendum quam vel rutrum rutrum. Duis nunc dolor, vehicula vitae pulvinar eu, semper vitae eros.
Proin auctor, felis placerat posuere dictum, massa ipsum fermentum ipsum, sit amet tincidunt metus justo ut dui. Curabitur aliquet tempor dolor eget volutpat. Proin consequat metus id justo interdum, id porta justo venenatis. Nullam vel tristique
neque, at luctus velit. Nulla sit amet convallis felis.
</div>

</body>

</html>

最佳答案

用 3 处更改更新了您的代码笔:codepen

  1. 更新了 ngscrollbars 文件的链接:github 不允许将文件直接用作脚本,将主机更改为 rawgit.com 即可

https://rawgit.com/iominh/ng-scrollbars/master/src/scrollbars.js

  1. 你拼错了指令:ng-scrollbars (注意最后的's')

  2. height CSS需要和指令在同一层。

<ul ng-scrollbars style = "height: 100px;">

关于angularjs - Angular + ngScrollbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33028114/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com