带有箭头图标的水平滚动菜单

Question

我只想显示带有箭头图标的“水平”菜单。因此，用户可以在小型设备中的菜单项之间移动。像这样。

所以我尝试使用文档wdith来玩js，但是存在问题。当前，它显示出最后一个菜单项和设备右边缘之间的巨大差距。

但是我需要在最后一个菜单项的结束处隐藏右箭头。像这样

这是我尝试的代码。

$(document).ready(function () {
    var leftMargin = 0;
    var width = $(document).width();
    var windowWidth = $(window).width();
    $('.left-arrow').click(function () {
        $('section').animate({
            marginLeft: "+=" + windowWidth 
        }, "medium");

        $('.right-arrow').show();
        leftMargin = (leftMargin - windowWidth)
        if (leftMargin == 0) {
            $('.left-arrow').hide();
        }
    });
    $('.right-arrow').click(function () {
        $('section').animate({
            marginLeft: "-=" + windowWidth
        }, "medium");

        $('.left-arrow').show();
        leftMargin = (leftMargin + windowWidth);
        if (leftMargin > width - windowWidth) {
            $('.right-arrow').hide();
        }
    });
});

.right-arrow{
  position:absolute;
  right:0;
  background:white;
  top;0;

}

section{
  white-space: nowrap;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="left-arrow" style="display:none">&laquo;</a>
<a href="#" class="right-arrow">&raquo;</a>

<section style="">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Lorem ipsum dolor sit amet, consectsum  egesttdfvdfg dgdgf. lam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Lorem ipsum dolor sit amet, consectsum  
</section>

这里是Jsfiddle

有什么主意吗？