Question

我正在使用这个jQuery库来帮助传输一堆徽标：SmoothDivScroll

让它工作得很好，我喜欢它。

但我想再补充一点。我希望在滚动条上方有一个渐变覆盖，以便在滚动条的每一侧上，徽标从白色转换 - >不透明 - ＆gt;当它滚动到另一边时，它是白色的。

我使用以下代码使用它除了它杀死我的每个徽标的超链接。我已经尝试过使用pointer-events / z-index，我只是无法在滚动条顶部获取叠加层，并且滚动条中的徽标也可以点击。在所有现代浏览器中，它也始终是相同的行为。这是CSS：

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index:-1;
    pointer-events: visible;

}

div.scrollableArea
{
    position: relative;
    width: auto;
    height: 100%;
    pointer-events: visible;

}


#logoParade
{
    width: auto;
    height: 80px;
    position: relative; 
    pointer-events: visible;    
}

#logoParade a
{
    display: block;
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    pointer-events: visible;
    z-index:210;
}

#logoParade img 
{       
    height:65px;
    width:auto; 
    pointer-events: visible;
}

#logoParade img:hover {
-ms-transform: scale(1.03,1.03); /* IE 9 */
-webkit-transform: scale(1.03,1.03); /* Chrome, Safari, Opera */
transform: scale(1.03,1.03);    
}



.grad {
pointer-events: none;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 1%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(255,255,255,1)), color-stop(20%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(255,255,255,1) 1%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */

}

这是html：

<div class="row grad" >
            <div id="logoParade">
                <div class="scrollWrapper">
                    <div class="scrollableArea" style="width: 6000px;">


@inherits umbraco.MacroEngines.DynamicNodeContext

@*
Macro Parameters To Create, for this macro to work:
Show:True   Alias:mediaId     Name:Media Folder ID    Type:MediaCurrent
*@


@if (Parameter.mediaId == null)
{
     @* Get the media folder as a dynamic node *@
    var mediaFolder =  Library.MediaById(5093);

    if (mediaFolder.Children.Any())
    {

            @* for each item in children of the selected media folder *@
            foreach (var mediaItem in mediaFolder.Children)
            {

                <a href="@mediaItem.website" target="_blank"><img  src="@mediaItem.umbracoFile" alt="@mediaItem.Name" /></a>

            }

    }
}


    </div>
        </div>
         </div>    
        </div>

我还想补充一点，将z-index：-1添加到div元素（scrollWrapper或scrollableArea）会将渐变带到滚动条前面，但这也是不允许单击我的锚标记的罪魁祸首。

CSS Gradient Overlay点击问题

0 个答案: