如何创建一个像水平滚动条一样的按钮？

我有一个横向滚动元素，用户可以使用简单的水平滚动条浏览。但是，我想添加一些按钮，像2张图片一样向前或向后移动并为其设置动画效果。如何创建一个像水平滚动条一样的按钮？

我对JQuery不是很熟悉，但是可以这样做吗？我知道滚动条在技术上并不是DOM的一部分，但它实际上是浏览器的一部分，但是有什么方法可以与它进行交互吗？

来源

2016-04-07 Turner Houghton

您的意思是说，您希望按钮使滚动条滚动左右两侧？ – FirstLegion

是的，我希望它滚动内容的权利或离开。 –

因为你万一你可以使用jQuery的$('.elm').scrollLeft(200)的元素滚动到左侧位置200，如果你想滚动到右边有没有方法这一点，因为这.scrollLeft(-100)可以做魔术向右滚动元素。

有关jQuery的.scrollLeft()更多信息请点击此链接：https://api.jquery.com/scrollleft/

我为你写一个基本的演示，并希望它是有帮助的。

工作演示链接： http://codepen.io/anon/pen/EKoVOj?editors=0010

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery Horizontal Scroll Demo</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div> 
    <button class="scroll-btn scroll-to-left" type="button">&larr;</button> 
    <p>Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Etiam vitae tortor. Vivamus laoreet. Cras dapibus. Nam pretium turpis et arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut tincidunt tincidunt erat. Donec venenatis vulputate lorem. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Phasellus gravida semper nisi. Morbi vestibulum volutpat enim. Curabitur a felis in nunc fringilla tristique. Phasellus accumsan cursus velit. Praesent venenatis metus at tortor pulvinar varius. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Sed in libero ut nibh placerat accumsan. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. In hac habitasse platea dictumst. Curabitur a felis in nunc fringilla tristique. Curabitur suscipit suscipit tellus. Donec mollis hendrerit risus. Sed lectus. Sed fringilla mauris sit amet nibh. Praesent ac massa at ligula laoreet iaculis.</p> 
    <button class="scroll-btn scroll-to-right" type="button">&rarr;</button> 
    </div> 
    <script src="script.js"></script> 
</body> 
</html>

的style.css

div { 
    background: tomato; 
    color: white; 
    font-size: larger; 
    font-family: Calibri; 
    margin: 50px auto; 
    padding: 20px 20px 10px; 
    overflow-x: scroll; 
    height: 160px; 
    width: 500px; 
    position: relative; 
} 

div > p { 
    margin: 0; 
    width: 1500px; 
} 

.scroll-btn { 
    background: lightblue; 
    color: blue; 
    border: none; 
    padding: 2px 10px; 
    font-size: xx-large; 
    position: fixed; 
    top: 0; 
} 

.scroll-btn:hover { 
    background: blue; 
    color: lightblue; 
    cursor: pointer; 
} 

.scroll-btn.scroll-to-left { left: 0; } 
.scroll-btn.scroll-to-right { right: 0; }

的script.js

$(function() { 
    'use strict'; 

    var scrollingValue = 30; 
    var scrollbarPosition = 10; 

    function getMaxChildWidth(elm) { 
    var childrenWidth = $.map($('>*', elm), function(el) { return $(el).width() }); 
    var max = 0; 
    for (var i = 0; i < childrenWidth.length; i++) { 
     max = childrenWidth[i] > max ? childrenWidth[i] : max; 
    } 
    return max; 
    } 

    function getScrollingValue(toLeft, ctx) { 

    if (toLeft) { 
     return scrollbarPosition < 1 ? 0 : scrollingValue; 
    } 
    return scrollbarPosition >= getMaxChildWidth(ctx) ? 0 : scrollingValue; 
    } 

    $('.scroll-btn.scroll-to-left').on('click', function() { 
    $(this).parent().scrollLeft(
     scrollbarPosition -= getScrollingValue(true, $(this).parent()) 
    ); 
    }); 

    $('.scroll-btn.scroll-to-right').on('click', function() { 
    $(this).parent().scrollLeft(
     scrollbarPosition += getScrollingValue(false, $(this).parent()) 
    ); 
    }); 
});

来源

2016-04-07 03:58:27 MNR

您需要创建这些按钮，然后将点击事件绑定到每个按钮。在这些活动中，请使用window.scrollTo()或window.scrollBy()来实现您想要的效果。

来源

2016-04-07 02:38:06

jQuery有一些built in scrolling functions，但它们可能不是你要找的。

如果您想要使用按钮，请将按钮添加到“图像保持器”div的任一侧。您可以根据正在显示的图像阵列中的图像更改div的内容，并使用CSS更改按钮大小和位置。

你可以使用javascript来处理像“display_first（）”，“display_next（）”和“display_previous（）”这样的函数。这些功能将隐藏当前显示的图像和显示图像数组中的下一个/上一个图像。然后，您可以使用按钮的onclick属性调用这些函数。

即

<button id="buttonR" onclick="display_next()">

来源

2016-04-07 02:56:44 almostcolin

你看不到任何方法来保持滚动条和添加按钮功能？我希望有一种方法可以同时使用，但我想我可能必须这样做。 –

您可能可以使用内置的getter和setter并编写自己的函数，这些函数将用于按钮的onclick属性。查看滑块的API：http：//api.jqueryui.com/slider/#option-value。我提供的URL可以告诉你如何获取和设置滑块的当前值。 – almostcolin

如何创建一个像水平滚动条一样的按钮？

回答

相关问题