Question

我想知道如何将我的两个箭头按钮转换为滚动按钮，以便您可以滚动div容器。如果你看下面的演示，你会发现按下黑色方块时会出现一个窗口。一个窗口打开，黑色矩形表示我的滚动按钮，灰色方块是内容。我想删除滚动条但仍然有滚动功能，我可以用我制作的两个黑色矩形按钮控制。我还希望底部黑色矩形是水平滚动条通常所在的位置，我不希望该按钮落入滚动条，因为这会使整个目的无效。

我还希望顶部按钮在容器一直在顶部时消失，而底部按钮在容器一直在底部时消失。

有一个网站，我从中得到了这个想法，所以你可以去看看它，看看我在说什么。它将在下面列出！如果单击左侧的小地图按钮，另一个窗口将打开圆形图标！您可能需要缩小浏览器以显示滚动功能，但是您会注意到底部有一个按钮向下滚动，一旦您向下滚动它就会消失，一旦向下滚动向上按钮，向上滚动就会向上滚动然后消失当你再次登顶时。

以下是示例网站！ http://intothearctic.gp/en/

这是一些代码！

HTML

<div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates" class="not-open regionsButton">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
    <div id="regionsUnitedStatesChooseState" class="regionsContent">
        <div id="chooseStateUnitedStatesColumnOne">
                <div id="chooseStateUnitedStatesScrollUp"></div>
                    <div id="chooseStateAlabama1" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama2" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama3" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama4" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama5" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama6" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama7" class="not-open regionsButton"></div>
                <div id="chooseStateUnitedStatesScrollDown"></div>
        </div>
    </div>
</div>

CSS

#sidemenu {
    width: 60px;
    height:100%;
    min-width: 60px;
    max-width: 60px;
    background-color: #383D3F;
    position: absolute;
    left: -60px;
    transition: left ease-in-out 0.5s;
    top: 0;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 100%;
    min-width: 60px;
    max-width: 60px;
    background-color: #383D3F;
    position: absolute;
    top:25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background-color:#111111;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background-color:#000;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
    visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
    }
#regionsUnitedStates:hover {
    background-position:bottom;
}
#regionsUnitedStatesChooseState{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -150px;
    width: 150px;
    height: 100%;
    background: #505759;
    top:0;
    z-index:-1;
    overflow:auto;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
    z-index:-1;
}
#chooseStateUnitedStatesScrollUp {
    width:150px;
    height:40px;
    background-color:#111111;
    top:0%;
}
#chooseStateUnitedStatesScrollUp:hover {
    background-position:bottom; 
    cursor:pointer;
}
#chooseStateUnitedStatesScrollDown {
    width:150px;
    height:40px;
    background-color:#111111;
    bottom:100%;
}
#chooseStateUnitedStatesScrollDown:hover {
    background-position:bottom; 
    cursor:pointer;
}
#chooseStateUnitedStatesColumnOne {
    width:100px;
    height:100%;
    float:left; 
    top:0%;
}
#chooseStateAlabama1 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama2 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama3 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama4 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama5 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama6 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
    margin-bottom:10px;
}

JAVASCRIPT

$(function(slideSidemenu) {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});

var $regionsContent = $('.regionsContent'), 
$regionsButton = $('.regionsButton').click(function(){
    var $button = $(this).removeClass('not-open');
    var buttonIndex = $regionsButton.index($button);
    $regionsContent.removeClass('show');
setTimeout(function() {
    $regionsContent.eq(buttonIndex).addClass('show');
    }, 150);
    $regionsButton.not($button).addClass('not-open');
});

$('#chooseStateAlabama').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
    }, 300);
});

$('#chooseStateAlaska').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
    }, 300);
});

样本

JSFIDDLE

Answer 1

这不会使滚动条消失，当向下移动到第四段时，它也不会隐藏除示例按钮以外的按钮向外滚动（所以这不是你需要的一切），但对于一个基本＆＃34;点击一个div来滚动jQuery＆＃34;例如，使用this answer中的代码：

window.onload = init;
function init() {
  $("#myButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#foo4").offset().top
    }, 2000);
  });
}

Working example

如何使用div按钮而不是滚动条滚动

1 个答案: