在Chrome中更改滚动条上的光标图像 [英] Change cursor image on scrollbar in chrome

问题描述

我需要在Chrome中更改滚动条的自定义光标。我有lightbox设置自定义光标与大X和关闭文本。问题是，在Chrome中，游标定义也由滚动条继承，这看起来有点有趣。

查看小提琴：

 < div class =below > 
< div class =full> 
< div class =scrollable>长文字< / div> 
< / div> 
< / div> 
  

CSS：

  .full {
 position：fixed; 
背景：红色; 
身高：100％; 
宽度：80％; 
 overflow-y：scroll; 
 cursor：url（'cursor.cur'），not-allowed; 
} 
 .scrollable {
 padding：1em; 
背景：白色; 
职位：亲属; 
 display：block; 
宽度：80％; 
 margin：50px auto; 
} 
  

http://jsfiddle.net/3fY9r/1/

有没有办法只触发滚动条，将外观改回默认光标？

解决方案

您可以使用chrome滚动条的供应商选择器来设置样式。但是，我认为它不会允许您更改光标。你可以试试看看它是否有效：

  ::  -  webkit-scrollbar {
 cursor：pointer; 
} 
  

更新
$ b

在仔细研究这个问题后，显然Chrome有一个错误，并且更新了滚动条上的光标。这是机票，它仍然是开放的。您仍然可以更改样式，但自定义看起来有点有限。

I need to change custom cursor for scrollbar in Chrome. I have lightbox which has set custom cursor with big X and Close text. Problem is that in chrome the cursor definition is inherited by the scrollbar as well, which looks a bit funny.

See the fiddle:

<div class="below">
    <div class="full">
         <div class="scrollable">long text</div>
    </div>
</div>

CSS:

.full{
    position:fixed;
    background:red;
    height:100%;
    width:80%;
    overflow-y:scroll;
    cursor: url('cursor.cur'),not-allowed;
}
.scrollable{
    padding:1em;
    background:white;
    position:relative;
    display:block;
    width:80%;
    margin:50px auto;
}

http://jsfiddle.net/3fY9r/1/

is there any way how to trigger the scrollbar only and change the appearance back to default cursor?

解决方案

You can use the vendor selectors for chrome's scrollbar to set styles. However, I don't think it will allow you to change the cursor. You could try this to see if it works:

::-webkit-scrollbar {
    cursor:pointer;
}

UPDATE

After looking more into this issue, apparently there is a bug with Chrome and updates to the cursor on scrollbars. Here is the ticket, it is still open. You can still change the styles, but the customizations seem a bit limited.

这篇关于在Chrome中更改滚动条上的光标图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！