Wie blende ich den Mauszeiger auf den Mauszeiger einer Bildlaufleiste?

Question

Wenn ich

verwenden

* { 
    cursor: none!important; 
} 

auf meiner Webseite, der Cursor erscheint nach wie vor, wenn über eine Bildlaufleiste schweben. Ich kann die Bildlaufleiste ausblenden, um dies zu verhindern, aber wie blende ich nur den Cursor und nicht die Bildlaufleiste?

Danke!

Answer 1

Sie können das tun mit jQuery "JScrollPane"

Sie haben

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.1.0/style/jquery.jscrollpane.css" /> 

Dann rief jQuery-Datei und die anderen Dateien auf dem ersten jscrollpane.css hinzufügen

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.1.0/script/jquery.jscrollpane.js"></script> 

So gut wie Sie ändern können den Cursor müssen Sie nur diesen Code in css cursor: zoom-in !important; zu cursor: none !important; ändern, wenn Sie den Cursor ausblenden möchten.

In:

.jspDrag { 
    background: #FF5722; 
    position: relative; 
    top: 0; 
    left: 0; 
    cursor: zoom-in !important; 
} 

Hier gehen Sie

$(function() 
 
{ 
 
    $('.scroll-pane') 
 
     .jScrollPane() 
 
     .bind(
 
      'mousewheel', 
 
      function(e) 
 
      { 
 
       e.preventDefault(); 
 
      } 
 
     ); 
 
});

.scroll-pane 
 
{ 
 
    width: 100%; 
 
    height: 200px; 
 
    overflow: auto; 
 
} 
 
.scroll-pane p 
 
{ 
 
    margin: 5px 0; 
 
} 
 
.jspTrack { 
 
    background: #0f7; 
 
    position: relative; 
 
} 
 
.jspDrag { 
 
    background: #FF5722; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    cursor: zoom-in !important; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.1.0/style/jquery.jscrollpane.css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.1.0/script/jquery.jscrollpane.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> 
 

 
<div class="scroll-pane"> 
 
       <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p> 
 
       <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id nibh luctus aliquam. Sed elementum, est ac sagittis porttitor, neque metus ultricies ante, in accumsan massa nisl non metus. Vivamus sagittis quam a lacus dictum tempor. Nullam in semper ipsum. Cras a est id massa malesuada tincidunt. Etiam a urna tellus. Ut rutrum vehicula dui, eu cursus magna tincidunt pretium. Donec malesuada accumsan quam, et commodo orci viverra et. Integer tincidunt sagittis lectus. Mauris ac ligula quis orci auctor tincidunt. Suspendisse odio justo, varius id.</p> 
 
       <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod.</p> 
 
     </div>

Answer 2

ist es nicht möglich, den Cursor für den ‚Browser Scrollbar‘ von CSS

allein mit sich ändern, weil CSS nur den Inhalt des Browsers Fenster soll bewirken und nicht die Browser-Oberfläche selbst.