使用 jquery 的自定义滚动在边缘和 IE 上不起作用。？

Posted 2023-05-08

【中文标题】使用 jquery 的自定义滚动在边缘和 IE 上不起作用。？

【英文标题】：Customized scroll with jquery not working on edge and IE.?

【发布时间】：2019-06-29 04:01:32

【问题描述】：

有人可以帮我为什么这不会在边缘或 IE 上滚动

/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 0.2.5
 * 
 */
(function($) 

  jQuery.fn.extend(
    slimScroll: function(o) 

      var ops = o;
      //do it for every element that matches selector
      this.each(function() 

        var isOverPanel, isOverBar, isDragg, queueHide, barHeight,
          divS = '<div></div>',
          minBarHeight = 30,
          wheelStep = 30,
          o = ops || ,
          cwidth = o.width || 'auto',
          cheight = o.height || '250px',
          size = o.size || '7px',
          color = o.color || '#000',
          position = o.position || 'right',
          opacity = o.opacity || .4,
          alwaysVisible = o.alwaysVisible === true;

        //used in event handlers and for better minification
        var me = $(this);

        //wrap content
        var wrapper = $(divS).css(
          position: 'relative',
          overflow: 'hidden',
          width: cwidth,
          height: cheight
        ).attr(
          'class': 'slimScrollDiv'
        );

        //update style for the div
        me.css(
          overflow: 'hidden',
          width: cwidth,
          height: cheight
        );

        //create scrollbar rail
        var rail = $(divS).css(
          width: '15px',
          height: '100%',
          position: 'absolute',
          top: 0
        );

        //create scrollbar
        var bar = $(divS).attr(
          'class': 'slimScrollBar ',
          style: 'border-radius: ' + size
        ).css(
          background: color,
          width: size,
          position: 'absolute',
          top: 0,
          opacity: opacity,
          display: alwaysVisible ? 'block' : 'none',
          BorderRadius: size,
          MozBorderRadius: size,
          WebkitBorderRadius: size,
          zIndex: 99
        );

        //set position
        var posCss = (position == 'right') ? 
          right: '1px'
         : 
          left: '1px'
        ;
        rail.css(posCss);
        bar.css(posCss);

        //wrap it
        me.wrap(wrapper);

        //append to parent div
        me.parent().append(bar);
        me.parent().append(rail);

        //make it draggable
        bar.draggable(
          axis: 'y',
          containment: 'parent',
          start: function() 
            isDragg = true;
          ,
          stop: function() 
            isDragg = false;
            hideBar();
          ,
          drag: function(e) 
            //scroll content
            scrollContent(0, $(this).position().top, false);
          
        );

        //on rail over
        rail.hover(function() 
          showBar();
        , function() 
          hideBar();
        );

        //on bar over
        bar.hover(function() 
          isOverBar = true;
        , function() 
          isOverBar = false;
        );

        //show on parent mouseover
        me.hover(function() 
          isOverPanel = true;
          showBar();
          hideBar();
        , function() 
          isOverPanel = false;
          hideBar();
        );

        var _onWheel = function(e) 
          //use mouse wheel only when mouse is over
          if (!isOverPanel) 
            return;
          

          var e = e || window.event;

          var delta = 0;
          if (e.wheelDelta) 
            delta = -e.wheelDelta / 120;
          
          if (e.detail) 
            delta = e.detail / 3;
          

          //scroll content
          scrollContent(0, delta, true);

          //stop window scroll
          if (e.preventDefault) 
            e.preventDefault();
          
          e.returnValue = false;
        

        var scrollContent = function(x, y, isWheel) 
          var delta = y;

          if (isWheel) 
            //move bar with mouse wheel
            delta = bar.position().top + y * wheelStep;

            //move bar, make sure it doesn't go out
            delta = Math.max(delta, 0);
            var maxTop = me.outerHeight() - bar.outerHeight();
            delta = Math.min(delta, maxTop);

            //scroll the scrollbar
            bar.css(
              top: delta + 'px'
            );
          

          //calculate actual scroll amount
          percentScroll = parseInt(bar.position().top) / (me.outerHeight() - bar.outerHeight());
          delta = percentScroll * (me[0].scrollHeight - me.outerHeight());

          //scroll content
          me.scrollTop(delta);

          //ensure bar is visible
          showBar();
        

        var attachWheel = function() 
          if (window.addEventListener) 
            this.addEventListener('DOMMouseScroll', _onWheel, false);
            this.addEventListener('mousewheel', _onWheel, false);
           else 
            document.attachEvent("onmousewheel", _onWheel)
          
        

        //attach scroll events
        attachWheel();

        var getBarHeight = function() 
          //calculate scrollbar height and make sure it is not too small
          barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
          bar.css(
            height: barHeight + 'px'
          );
        

        //set up initial height
        getBarHeight();

        var showBar = function() 
          //recalculate bar height
          getBarHeight();
          clearTimeout(queueHide);

          //show only when required
          if (barHeight >= me.outerHeight()) 
            return;
          
          bar.fadeIn('fast');
        

        var hideBar = function() 
          //only hide when options allow it
          if (!alwaysVisible) 
            queueHide = setTimeout(function() 
              if (!isOverBar && !isDragg) 
                bar.fadeOut('slow');
              
            , 1000);
          
        

      );

      //maintain chainability
      return this;
    
  );

  jQuery.fn.extend(
    slimscroll: jQuery.fn.slimScroll
  );

)(jQuery);


//invalid name call
$('#chatlist').slimscroll(
  color: '#00f',
  size: '10px',
  width: '50px',
  height: '50px'
);

div#chatlist 
  width: 50px;
  height: 40px!important;
  border: 1px solid black;


div.mousescroll 
  overflow: hidden;


div.mousescroll:hover 
  overflow-y: scroll;


ul 
  list-style-type: none;


.slimScrollDiv 
  border: 1px solid #ccc;
  margin: 10px;

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<div id="chatlist" class="mousescroll">
  <ul>
    <li>1 item</li>
    <li>2 item</li>
    <li>3 item</li>
    <li>4 item</li>
    <li>5 item</li>
    <li>6 item</li>
    <li>7 item</li>
    <li>8 tem</li>
    <li>9 item</li>
    <li>a item</li>
    <li>b item</li>
    <li>c item</li>
    <li>d item</li>
    <li>e item</li>
    <li>f item</li>
    <li>g item</li>
    <li>h item</li>
    <li>i item</li>
    <li>j item</li>
    <li>k item</li>
  </ul>
</div>

函数是否有问题或可能是什么，有人可以帮助我吗？一个函数有什么问题或者它可能是什么，有人可以帮助我吗？

【问题讨论】：

是的 mousescroll 可以在 chrome 和 mozilla 上运行，但在 edge 和 internet explorer 上无法运行

你说 chrome 在标题中不起作用

对不起，我的意思是 chrome 作品

【参考方案1】：

我尝试在 Chrome、IE 和 MS Edge 中使用您的代码进行测试。

我发现滚动在 MS Edge 和 IE 上运行良好。

以下是我的测试结果。

Chrome 中的输出：

MS Edge 中的输出：

在 IE 中的输出：

我建议你只用上面的代码做一个测试，检查它是否工作。如果问题仍然存在，请尝试检查控制台是否有任何错误或警告消息。