我正在使用 niceScroll jQuery插件来替换溢出的< div>中的常见浏览器滚动条.该插件运行良好,但我不能让它工作并始终显示滚动轨道(即使内容不超过< div>界限).我的最终配置是:
$(document).ready(function () {
    $(".div-wrapper").niceScroll({
        cursorcolor: "#333",cursoropacitymin: 0.3,background: "#bbb",cursorborder: "0",autohidemode: false,cursorminheight: 30
    });
};

我试图触发$(“.div-wrapper”).getNiceScroll().show()但它似乎也没有用.

任何帮助将不胜感激,谢谢

解决方法

首先,你最后有一个缺失的括号 – 这可能是你的问题吗?

将autohidemode设置为false仅表示当用户停止滚动时它不会消失,然后在滚动时再次出现.不幸的是,如果内容没有溢出,这并不意味着它是可见的.

作为一种解决方法,您可以尝试使用以下内容调用.niceScroll()后,明确显示id = ascrail2000的元素:

$(document).ready(function () {
    $(".div-wrapper").niceScroll({
        cursorcolor: "#333",cursorminheight: 30
    });
    $('#ascrail2000').show();
});

在最后一行中看到遗失的部分

您可能还需要使其子元素可见:

$('#ascrail2000 *').show();

(在你的情况下,确保元素的id是ascrail2000.)

更新:正如veritas指出的那样,使用更通用的选择器div [id ^ =’ascrail’]而不是#ascrail2000使得它可以在一个页面上运行多个nicescroll,因此上述操作可以通过JavaScript完成:

$("div[id^='ascrail']").show();

或者在CSS中:

div[id^='ascrail'] { display: block; }

或者如果上述方法不起作用:

div[id^='ascrail'] { display: block !important; }

这不是最优雅的解决方案,但我担心这是解决此问题的唯一方法,因为nicescroll插件没有选择该行为的选项.幸运的是,nicescroll是开源的,available on GitHub因此可以轻松地将它分叉并在GitHub上添加这样的选项或post a feature request.

javascript – 始终显示niceScroll导轨的更多相关文章

  1. jQuery滚动条美化插件nicescroll简单用法示例

    这篇文章主要介绍了jQuery滚动条美化插件nicescroll简单用法,结合实例形式简单分析了jQuery滚动条美化插件jquery.nicescroll.js的引入与使用技巧,非常简单实用,需要的朋友可以参考下

  2. jQuery中Nicescroll滚动条插件的用法

    本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下。

  3. jQuery niceScroll滚动条错位问题的解决方法

    下面小编就为大家带来一篇jQuery niceScroll滚动条错位问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Angular5中调用第三方js插件

    一、第一种方式:在.angular-cli.json文件中配置步骤:1.在项目根目录.angular-cli.json文件中找到script字段,在数组中添加要引用的所有js文件2.在需要用该插件的组件中做如下声明:declarevar$:any;目的是不让编译时报错3.接下来在ngOnInit方法中就能正常用上面的三款插件了。

  5. javascript – 始终显示niceScroll导轨

    我正在使用niceScrolljQuery插件来替换溢出的中的常见浏览器滚动条.该插件运行良好,但我不能让它工作并始终显示滚动轨道.我的最终配置是:我试图触发$.getNiceScroll().show()但它似乎也没有用.任何帮助将不胜感激,谢谢解决方法首先,你最后有一个缺失的括号–这可能是你的问题吗?

  6. jquery – 鼠标滚轮平滑滚动缓和效果

    我一直在搜索谷歌,但我找不到类似的东西。有人有任何建议如何使用jQuery复制此效果?解决方法我最近也遇到了这个问题,我没有找到很多支持,所以我很快忘了这个问题。几个月后,我看到了一个更好的平滑滚动的例子,所以我进去挖掘他们使用的JavaScript文件,我发现他们使用一个名为NiceScroll的jQuery文件。我相信这是我们一直在寻找的–简单的平滑滚动的divs,iframe或任何,很像iOS滚动。

  7. javascript – 如何安装jQuery插件?

    我一直在尝试安装NiceScroll插件,这使得滚动更加顺畅.该网站是http://areaaperta.com/nicescroll/index.html,我似乎无法弄清楚如何安装它.我真的不明白说明.它不工作,我不知道我在做什么,因为我不明白jQuery.这是我的代码:在标题中,顺便说一句.解决方法您需要添加http://协议.

  8. html5 – 在iOS上滚动iframe已解决,但iframe页面显示不完整

    我在我的iphone和ipad上测试过,iframe页面显示不稳定.任何的想法?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部