我真的很失望,我无法自定义FF的滚动条,但现在我正在寻找替代方案.下面列出的是我发现的最好的,但我认为我应该征求意见,也许可以链接到更好的!
http://manos.malihu.gr/jquery-custom-content-scroller(看起来很棒,支持内容更改)
http://baijs.nl/tinyscrollbar/(看起来不错,支持内容更改,100行代码等)
http://johnford.is/examples/script.aculo.us/index.html(图片示例看起来不错,提供鼠标滚轮支持)
这些是最好的,还是有人有推荐？
我有与reCaptcha的联系表格并使用jQuery mCustomScrollbar插件.
问题:当我点击/关注reCaptcha字段时,页面会自动滚动到div的顶部.
注意:如果mscrollbar没有在jsfiddle上工作,那就是从malihu网站调用js和css的问题.
$(".scroller-back").mCustomScrollbar({
advanced:{
updateOnContentResize: true
}
});
运用 autoScrollOnFocus: false
在具有焦点的元素上自动滚动(例如,滚动条自动滚动 - 在按下TAB键时形成文本字段),值:true,false.
$(".scroller-back").mCustomScrollbar({
advanced:{
autoScrollOnFocus: false,
updateOnContentResize: true
}
});
它适用于所有领域焦点不自动滚动,如何在不使用的情况下解决此问题autoScrollOnFocus: false？
如何将mCustomScrollbar应用于SCEditor？
这是我到目前为止所尝试的:
HTML
<button id="btnScrollBar">Apply scrollbar</button>
<textarea id="editor"></textarea>
JS
$("#editor").sceditor({
plugins: "xhtml",
width: '100%',
style: "http://www.sceditor.com/minified/jquery.sceditor.default.min.css"
});
$("#btnScrollBar").click(function()
{
console.log("click");
$(".sceditor-container iframe").contents().find("body").mCustomScrollbar();
});
我需要一个自定义滚动条插件用于个人项目("自定义"我指的是基本惯性效果,自定义图像等).我的选择是mCustomScrollbar.
文档确实非常清楚,我在实现脚本时没有遇到任何问题,但它似乎只有在我调整页面大小时才有效,就好像不需要滚动一样.
实际上,滚动条style="display: hidden"在一个完全加载的页面上,就像在这个问题中一样(但我找不到任何有用的答案).
我相信存在一些height问题slidesjs(我也在使用它),但我找不到它......这里有一些代码:
(这是整个页面,所以你可以用firebug查看代码......只需在"Pulcini"下查看长内容)
<head>
<!-- everything is included -->
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/jquery.mCustomScrollbar.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script>
<script>
$(function(){
$("#slides").slides({
generatePagination: false,
pagination: true,
paginationClass: 'pagination'
});
});
</script>
<script>
(function($){
$(window).load(function(){
$("#slide2").mCustomScrollbar();
});
})(jQuery);
</script>
</head>
<body>
<div id="slides">
<!-- other stuff -->
<div class="slides_container">
<div id="slide1">
<h2>Uova</h2>
<p>Text1...</p>
</div>
<!-- slide2 is the scrollbar div …我在我的网站上有一个jQuery自定义内容滚动条div.该div内容具有的参数("#content").hide().div当页面加载并且jQuery自定义内容滚动条完美运行时,它是可见的.
但是,如果在div加载页面时内容不可见,则jQuery自定义内容滚动器不可见且不起作用.我注意到当缩小或放大窗口时,滚动条会显示.我在这个URL上有一个小例子:http://www.frantatoulen.wz.cz/
问题可能在哪里？
我在我的网站上使用jQuery自定义内容滚动条并正确安装了所有文件.但是,我希望这个插件能够取代我的默认浏览器滚动条,而且我很难实现这一点.显然,我需要将它应用于整体HTML标记.
要将此插件添加到内容,开发人员会建议以下内容:
<script>
(function($){
$(window).load(function(){
$(".your-div-class-here").mCustomScrollbar();
});
})(jQuery);
</script>
到目前为止,要将它应用到浏览器滚动条,我已经尝试了下面的代码并且它没有工作:
<script>
$(document).ready(
function() {
$("html").mCustomScrollbar();
}
);
</script>
有人知道我做错了什么,或者我如何使这个代码在浏览器上运行？
我有一个带有 自定义mCustomScrollbar scrollbar的漂亮滑块：
// ???????
var $carousel = $('.slick').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
infinite: false,
prevArrow: $('.slick-prev'),
nextArrow: $('.slick-next'),
});
// $carousel.on('wheel', (function(e) {
// e.preventDefault();
// if (e.originalEvent.deltaY < 0) {
// $(this).slick('slickNext');
// } else {
// $(this).slick('slickPrev');
// }
// }));
// ??????????
$('[data-filter=".idx-2"]').click(function(e) {
$carousel.slick('slickUnfilter');
$carousel.slick('slickFilter', $('.idx-2') );
console.log('click 2');
});
$('[data-filter=".idx-1"]').click(function(e) {
$carousel.slick('slickUnfilter');
$carousel.slick('slickFilter', $('.idx-1') );
console.log('click 1');
});
$('[data-filter="*"]').click(function(e) {
$carousel.slick('slickUnfilter');
$carousel.slick('slickFilter', $('.element-item') );
console.log('*');
});
// ??????
$(window).load(function(){
$(".mcs-horizontal").mCustomScrollbar({ …滚动条仅在第一次打开时显示，不再显示。我做错了什么？
$('.select').on('select2:open', function () {
function showScroll() {
$('.select2-results__options').mCustomScrollbar();
}
setTimeout(showScroll, 1);
});
mCustomScrollbar有一个奇怪的问题 - 这里有类似的问题:
在重新调整窗口大小或按F12(在IE9和FF上测试 - 所以Developer和Firebug)之前,滚动条不会显示.只要你这样做,代码就会启动.元素最初是隐藏的,并使用.show()或.fadeIn()显示
CSS:
.info-text {
width: 230px;
height: 170px;
overflow: hidden;
display: block;
}
HTML:
<p class = "info-text">
Lorem...
</p>
JS:
$(".info-text").mCustomScrollbar();
JS是在一个 $(window).load(function(){...
我有一个问题,将这些模块导入我的angular2组件.我使用AngularClass的angular2-webpack-starter.
我用npm安装dependecies:
npm install jquery --save
npm install malihu-custom-scrollbar-plugin --save
并安装打字:
typings install jquery --save --ambient
typings install mcustomscrollbar --save --ambient
我想在这样的组件中使用它:
jQuery('.selector').mCustomScrollbar();
这样做的最佳解决方案是什么？
我尝试使用这个解决方案:什么是在角度2内使用jquery小部件的最佳方法？
但它不起作用,我得到错误"jQuery没有定义".
我使用mCustomScrollbar作为页面上的元素,有时会重新加载.这是一个消息视图,当用户点击另一个对话时,会加载此对话的消息.但是,当我想在加载它之后滚动到底部,因为最新的消息在底部,它滚动到底部但是在底部以上几个像素("一些"可以在10到200px之间随机).
以下是一个简化示例:
// code to load another conversation
$(".conversations .conversation").click(function (e) {
var $this = $(this);
$.ajax({
url: W.sprintf('/messages/%s/fetch', $this.attr("data-cid")),
dataType: 'html'
}).done(function(data) {
$('.main_pane.messages').html(data);
// a function call to set the hight of .main_list.messages goes here
$(".main_list.messages").mCustomScrollbar(W.scroll_prefs);
$(".main_list.messages").mCustomScrollbar("scrollTo", "bottom");
// also tried adding an element at bottom and scrolling to this
// and scrollTo Number.MAX_VALUE
// also tried putting the two mCustomScrollbar lines both into
// setTimeout()
});
});
<!-- this is what gets loaded -->
#conversation
.head
-# …