如何动态地隐藏或显示div元素上的滚动条？

我发现这个解决方案动态（悬停）显示html元素上的滚动条。如何动态地隐藏或显示div元素上的滚动条？

.scrollbox { 
 
    width: 10em; 
 
    height: 10em; 
 
    overflow: auto; 
 
    visibility: hidden; 
 
    } 
 
    .scrollbox-content, 
 
    .scrollbox:hover { 
 
    visibility: visible; 
 
    }

 <h2>Hover it</h2> 
 
    <div class="scrollbox"> 
 
     <div class="scrollbox-content">Lorem ipsum dolor sit amet, 
 
     consectetur adipisicing elit. Facere velit, repellat voluptas ipsa 
 
     impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate 
 
     perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et 
 
     excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
     Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. 
 
     Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, 
 
     nisi suscipit aliquam, quam, et excepturi! 
 
     </div> 
 
    </div>

虽然这是在Firefox和IE浏览器的工作以及它不会在网络套件的浏览器 - 这是不可能的，使用滚动条。你知道一个解决方案吗？

来源

2017-02-13 Kasimir

尝试在WebKit浏览器使用['-webkit-scrollbar'（https://css-tricks.com/examples/WebKitScrollbars/）。 – TricksfortheWeb

相关问题.. http://stackoverflow.com/questions/10015389/showing-scrollbars-only-when-mouseover-div – CommonKnowledge

TricksfortheWeb给出了正确的提示 - 它不是在WebKit浏览器中定义自定义滚动条的选项，它是必需的。您必须添加一些CSS选择器，例如：

div::-webkit-scrollbar { 
    width: 13px; 
} 
div::-webkit-scrollbar-track { 
background: #DDD; 
} 
div::-webkit-scrollbar-thumb { 
background: #BBB; 
} 
div::-webkit-scrollbar-thumb:hover { 
background: #999; 
} 
div::-webkit-scrollbar-thumb:active { 
background: #777; 
} 

div::-webkit-scrollbar-button { 
background: #DDD; 
width: 13px; 
height: 13px; 
} 
div::-webkit-scrollbar-button:vertical:decrement { 
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAQAAAClB0z9AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhAg4JMDvqT6KMAAAAIElEQVQI12NgwAr+QyhGJA4jAwMTlMMIoRnhHLgGJAAA8YoGAjR+UnEAAAAASUVORK5CYII='); 
background-repeat: no-repeat; 
background-position: 3px 3px; 
} 
div::-webkit-scrollbar-button:vertical:increment { 
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAQAAAClB0z9AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhAg4JMSB5MVohAAAAJ0lEQVQI12NgQAGMDP8ZGBgYGRgYGBj+M0Cp/zASWZwRoek/AzYAAJSyB/2cvV19AAAAAElFTkSuQmCC'); 
background-repeat: no-repeat; 
background-position: 3px 3px; 
}

来源

2017-02-14 10:18:03 Kasimir

如何动态地隐藏或显示div元素上的滚动条？

回答

相关问题