标签: slimscroll

这是这个帖子的续集.

在我为客户构建的网站的一个页面上,全页导航和scrolloverflow/slimscroll都可以正常工作.

在另一页上,fullpage导航工作,但溢出不滚动.看起来像这两个div与类.slimScrollDiv并.scrollable没有按预期创建.这是jsfiddle ; 将scrollOverflow被设置为true还没有第二部分的溢出不会滚动.

$.fn.fullpage({
    scrollOverflow: true
});

我正在使用slimScroll jQuery插件,似乎destroy选项并没有完全破坏网站上的插件效果.

例如,如果您尝试销毁插件然后滚动以前可滚动的内容,则网站滚动功能将停止工作.您将能够使用滚动条滚动,而不是使用鼠标滚轮/触控板.

这是bug的复制品

请注意以下几点:

• 使用鼠标滚轮/触控板在先前可滚动的元素上滚动会阻止滚动.
• 在先前可滚动元素之外滚动按预期工作.
• 如果在销毁之前将slimScroll滚动到底部,则在销毁它时,它可以在任何场合正常工作.

我已经在存储库中报告了它,但没有给出答案.它似乎被抛弃了.我尝试了不同的建议解决方案,但它们都没有正常工作.

缺乏一种破坏插件的正确方法似乎是问题所在......

在jsfiddle中使用的代码:

$('.scrollable').slimScroll({
    allowPageScroll: true,
    height: '250px',
    size: '10px',
    alwaysVisible: true
});

$('.destroy').click(function(){
    $('.scrollable').slimScroll({
        destroy:true
    });
});

我在js项目中使用slimScroll,在页面的一侧使用滚动条.scrollView中有很多元素,现在它以快速而非直观的方式滚动.当我减少车轮和/或touchScrollStep的数量时,不会改变它的速度.

* Version: 1.3.0
*
*/
(function($) {

jQuery.fn.extend({
slimScroll: function(options) {

  var defaults = {

    // width in pixels of the visible scroll area
    width : 'auto',

    // height in pixels of the visible scroll area
    height : '250px',

    // width in pixels of the scrollbar and rail
    size : '7px',

    // scrollbar color, accepts any hex/color value
    color: '#000',

    // scrollbar position - left/right
    position : 'right',

    // distance in pixels between the side edge and the scrollbar …

我正在尝试实现一个包含通知的下拉菜单，例如该页面具有：http : //infinite-woodland-5276.herokuapp.com/index.html。我正在尝试重新创建网站右上角的扩音器图标及其菜单。

我成功地制作了带有项目列表的标题菜单图标。但是我不能使滚动条工作。

它使用的是jquery插件slimScroll，可在此处找到：http ://rocha.la/jQuery-slimScroll 。

在教程中，滚动条的位置看起来非常简单直接。这是我的工作：

$(document).ready(function(){
        $('#main-navbar-notifications').slimScroll({
            height : 250
        });
    });

实施此代码后，此代码出现在我的DOM中：

<div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 195.925px; background: rgb(0, 0, 0);"></div>
<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>

正如我所期望的那样，它们没有出现在＃main-navbar-notifications中，而是随后出现。但是，我发现我要复制的示例中存在完全相同的DOM结构。好像是应该的。

但是我的滚动条根本不起作用。如果我将鼠标悬停在div上，则什么也不会发生。我尝试将滚动条设置为始终可见，但仍然没有任何反应。然后，我在chrome inspector中进入HTML本身，并手动将滚动条和导轨设置为可见。这样可以提高可见性，因为它们的外观完全符合我的预期，但是它们仍然没有对任何鼠标操作做出反应。

我能够找到的关于该主题的唯一信息是，确保将我的滚动div设置为position: relative;，但这没有做任何事情。我的控制台中没有错误消息，也没有任何消息。

我试图在小提琴中重现我的问题，但无法在此处上传slimscroll库。

有谁知道这个错误可能是什么？还是有任何找出问题根源的策略？

基本上我想在用户滚动时运行一些东西......我怎么可能这样做？

我已经知道我在SlimScroll网站上发现的这个事件,但除此之外没有其他事件;

//...

var $scrollable = $('.scrollable');

$scrollable.slimScroll().bind('slimscroll', function (e, pos) {
    // SOME CODE...
});

//...

但这仅在滚动条到达可滚动部分的顶部或底部时才有效.

滚动条本身工作正常,只需要一个事件监听器!

谢谢

我正在开发与彗星的聊天,我希望Slimscroll只向下滚动div更新,因为我的聊天脚本通过向div添加新消息来更新div.到目前为止,我能够让Slimscroll每2秒向下滚动一次.

问题 但问题是它向下滚动div是否已经改变,因此,用户无法滚动到顶部.如果只有当id的id messages_content改变或增大时,如何使其向下滚动？

这是我的slimscroll代码

  $(".slimscroll").slimscroll({
        height: "300px",
        color : "#0073b7",
        alwaysVisible: true,
        size: "10px",
        start: 'bottom',
        railVisible: true,
      railColor: '#0073b7',
      railBorderRadius: 0

    }).css("width", "100%");


     // update content every second
  setInterval(function(){

    // update slimscroll every time content changes
   var en_bas = $('.slimscroll').slimscroll({ scrollBy: '400px' });



  }, 2000);

这是我的Comet Code,它使用prototypejs从数据库中获取信息.

<script type="text/javascript">

var Comet = Class.create();
Comet.prototype = {

  timestamp: 0,
  url: './messages_private_travail.php?id_du_membre_envoye=<?php echo $id_ojm_peoples; ?>&id_de_l_autre_originale=<?php echo $id_de_l_autre_originale; ?>&id_message=<?php echo addslashes(@$_GET['id_message']); ?>&chat_between=<?php $chat_between = hash('sha512',"Chat Between $id_ojm_peoples AND $id_de_l_autre_originale");  echo …