一千萬個為什麽

搜索

如何自動滾動div onmouseover並隱藏該div的滾動條?

我想在onmouseover或使用圖像映射自動滾動特定元素。我還想隱藏該div的滾動條。問題是...

我不明白該怎麽做。我已經學習了幾個星期的JavaScript,我只學習了無用的部分。什麽都不適用於網頁設計,即。我確實谷歌它並沒有給我我正在尋找的確切答案,也沒有能夠調整這些例子為我工作。

代碼在jsfiddle.net上,除非我打破了一條不成文的規則,請告訴我,我會發布鏈接。請拜托!不要只是給我一個答案,因為我是初學者。請解釋你的解決方案。非常感謝!

http://jsfiddle.net/thindjinn/KQP9t/2/

決定添加代碼,因為我在執行此操作之前已經立即做出響應。

<!DOCTYPE HTML>
<html>
    <title>Scrolling Pictures</title>
    <head>
        <link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
        <script src="/scrollingPictures.js"></script>
    </head>
    <body>
        <div class="mask"></div> <!-- White behind images, to keep color consistent when low transparency -->
        <div id="scroll">
            Steve Jobs

            Richard Branson

            Anderson Cooper

            Rachel Maddow

            Kanye West

            Larry Page
        </div>

        <div class="gradientTop"></div>
        <div class="gradientBottom"></div>

        <div id="work"><div class="panel">Work</div></div>
        <div id="education"><div class="panel">Education</div></div>
        <div id="skills"><div class="panel">Skills</div></div>
        <div id="footer"> Home   <!-- Beginning of Footer -->
            Privacy Statement  
            Contact Us  
            Careers  
            More Info
        </div>

    </body>
</html>

body{
    overflow:hidden;
    margin-left:0;
    margin-top:0;
}
div#scroll{
    border-right:1px solid orange;
    position:absolute;
    z-index:2;
    float:left;
    width:200px;
    height:100%;
    overflow:auto;
    overflow-x:hidden;
}
img.left{
    z-index:inherit;
    float:left;
    width:200px; 
    min-height:200px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:200px; /* for IE5.x and IE6 */
    opacity:0.4;
    filter:alpha(opacity=40);
}
#image1, #image2, #image3{
    width:200px;
}
img.left:hover{
    opacity:1;
}
div.gradientTop{
    position:absolute;
    margin-top:0;
    z-index:2;
    width:206px;
    height:30px;
    float:left;
    background:-webkit-linear-gradient(rgba(255,255,255,2), rgba(255,255,255,0))
}
div.gradientBottom{
    position:absolute;
    margin-bottom:50px;
    z-index:2;
    width:206px;
    height:120px;
    float:left;
    bottom:-210px;
    background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))
}
.panel{
    font-size:2em;
    padding-right:5%;
    padding-top:7%;
    height:100%;
}
#work{
    width:100%;
    z-index:0;
    color:orange;
    position:relative; 
    text-align:right;
    max-height:500px;
    background-color:#fff; 
    min-height:200px; /* for modern browsers */
    min-width:700px;
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
}
#education{
    width:100%;
    z-index:0;
    color:orange;
    position:relative; 
    text-align:right;
    max-height:500px; 
    background-color:#fff; 
    min-height:200px; /* for modern browsers */
    min-width:700px;
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
}
#skills{
    width:100%;
    z-index:0;
    color:orange;
    position:relative; 
    text-align:right;
    max-height:500px; 
    background-color:#ffe; 
    min-height:200px; /* for modern browsers */
    min-width:700px;
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
}
#work:hover,#education:hover,#skills:hover{
    z-index:0;
    background-color:#f0f0f9;
    border-top:1px solid #d0d0d0;
    border-bottom:1px solid #e0e0e0;
}
#work:active,#education:active,#skills:active{
    z-index:0;
    background-color:#ededf2;
    border-top:1px solid #d0d0d0;
    border-bottom:1px solid #e0e0e0;
}
div.mask{
    position:relative;
    z-index:1;
    margin-top:5px;
    float:left;
    width:206px;
    height:805px;
    background-color:white;
}
#footer {
    background:white;
    z-index:3;
    position:absolute;
    font-variant:normal;
    text-indent:5%;
    color:#333;
    clear:both;
    height:50px;
    padding-top:20px;
}

最佳答案

如何隱藏滾動條:

在div上將css屬性 overflow 設置為 hidden

<div style="overflow:hidden"></div>

如何滾動div:

該元素具有scrollTop屬性,該屬性是元素滾動的像素數量。您可以通過分配此屬性來滾動元素:

var div = document.getElementById(someId);
div.scrollTop = 50;

如何在mouseover上執行某些操作:

var div = document.getElementById(someId);
div.onmouseover = function() {
   //do something here
};

轉載註明原文: 如何自動滾動div onmouseover並隱藏該div的滾動條?