javascript - 向左滚动div不起作用可滚动菜单 fiddle jquery

Question

我正在编写这个可滚动菜单，我使用 div left Scroll 函数使其向左或向右移动

问题

容器不动。

$("#left").on("click",function () { 
    $(".scrollmenu").animate({left: '-=50'}, 'slow');
});

$("#right").on("click",function () {
    $(".scrollmenu").animate({left: '+=50'}, 'slow');
});

.container {
    border:0px solid red;
    height:45px;
    overflow:hidden;
}
.scrollmenu {
    width:300px;
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}
.scrollmenu::-webkit-scrollbar {
    width: 0px;  
    background: transparent; 
}
.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
.scrollmenu a:hover {
    background-color: #777;
}
#right,#left{cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table border=1>
    <tr>
        <td id="left"><</td>
        <td>
            <div class="container">
                <div class="scrollmenu">
                    <a href="#home">Home</a>
                    <a href="#news">News</a>
                    <a href="#contact">Contact</a>
                    <a href="#about">About</a>
                    <a href="#support">Support</a>
                    <a href="#blog">Blog</a>
                    <a href="#tools">Tools</a>  
                    <a href="#base">Base</a>
                    <a href="#custom">Custom</a>
                    <a href="#more">More</a>
                    <a href="#logo">Logo</a>
                    <a href="#friends">Friends</a>
                    <a href="#partners">Partners</a>
                    <a href="#people">People</a>
                    <a href="#work">Work</a>
                </div>
            </div>
        </td>
        <td id="right">></td>
    </tr>
</table>

Answer 1

$("#left").click(function(event) { 
event.preventDefault();
     $(".scrollmenu").animate({ "left": "+=60px" }, "slow" );
});

$("#right").click(function(event) {
event.preventDefault();
   $(".scrollmenu").animate({ "left": "-=60px" }, "slow" );
});
	

.container {
    border:0px solid red;
    height:45px;
    overflow:hidden;
width:300px;
	background-color: #333;
}
.scrollmenu {
    width:100%;

    background-color: #333;
    overflow: visible;
    white-space: nowrap;
	position:relative;
	display: block;
}
.scrollmenu::-webkit-scrollbar {
    width: 0px;  
    background: transparent; 
}
.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
.scrollmenu a:hover {
    background-color: #777;
}
#right,#left{cursor:pointer;pointer-events: all}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
    <tr>
        <td id="left">&#8592;</td>
			<td>
            <div class="container">
                <div class="scrollmenu">
                    <a href="#home">Home</a>
                    <a href="#news">News</a>
                    <a href="#contact">Contact</a>
                    <a href="#about">About</a>
                    <a href="#support">Support</a>
                    <a href="#blog">Blog</a>
                    <a href="#tools">Tools</a>  
                    <a href="#base">Base</a>
                    <a href="#custom">Custom</a>
                    <a href="#more">More</a>
                    <a href="#logo">Logo</a>
                    <a href="#friends">Friends</a>
                    <a href="#partners">Partners</a>
                    <a href="#people">People</a>
                    <a href="#work">Work</a>
                </div>
            </div>
        </td>
        <td id="right">&#8594;</td>
    </tr>
</table>

您现在需要添加一个脚本以在滚动溢出时停止