如何创建一个像水平滚动条一样的按钮？
[英]How can I create a button that acts like a horizontal scroll bar?
问题描述
I have a side-scrolling element that users can navigate through using a simple horizontal scroll bar. 
我有一个侧滚动元素，用户可以使用简单的水平滚动条浏览。 However, I want to add some buttons on the side to move forward or backward like 2 pictures and animate it. 但是，我想在侧面添加一些按钮，像2张图片一样向前或向后移动并为其设置动画。
I'm not very familiar with JQuery but would something like this be possible? 我对JQuery不是很熟悉，但这样的事情可能吗？ I know that the scroll bar isn't technically part of the DOM but is actually part of the browser, but is there any way to interact with it? 我知道滚动条在技术上不是DOM的一部分，但实际上是浏览器的一部分，但有没有办法与它进行交互？
3 个解决方案
解决方案1
1 2016-04-07 02:56:44
jQuery has some built in scrolling functions , but they might not be what you're looking for. jQuery有一些内置的滚动功能 ，但它们可能不是你想要的。
If you want to use buttons instead, add the buttons to either side of an "image-holder" div. 如果您想使用按钮，请将按钮添加到“图像持有者”div的任一侧。 You can change the div's content based on which image in an array of images is being displayed and change the button size and positioning using CSS. 您可以根据显示的图像阵列中的图像更改div的内容，并使用CSS更改按钮大小和位置。
You could use javascript for functions like "display_first()", "display_next()", and "display_previous()". 您可以将javascript用于“display_first（）”，“display_next（）”和“display_previous（）”等功能。 These functions would hide the currently displayed image and show the next/previous image in the image array. 这些功能将隐藏当前显示的图像并显示图像阵列中的下一个/上一个图像。 You could then call these functions using your buttons' onclick attributes. 然后，您可以使用按钮的onclick属性调用这些函数。
ie 即
<button id="buttonR" onclick="display_next()">
解决方案2
1 已采纳 2016-04-07 03:58:27
For you case your can use jQuery's $('.elm').scrollLeft(200) to scroll the element to the left position 200 if you want to scroll to right there is no method for this because this .scrollLeft(-100) can do the magic for scrolling an element to the right. 对于你的情况，你可以使用jQuery的$('.elm').scrollLeft(200)将元素滚动到左侧位置200如果你想向右滚动没有方法，因为这个.scrollLeft(-100)可以做一个向右滚动元素的魔力。
For more info about jQuery .scrollLeft() follow this link: https://api.jquery.com/scrollleft/ 有关jQuery .scrollLeft()更多信息，请.scrollLeft()以下链接： https ： .scrollLeft()
I wrote a basic demo for you and hope it to be helpful. 我为你写了一个基本的演示，并希望它有所帮助。
Working demo link : http://codepen.io/anon/pen/EKoVOj?editors=0010 工作演示链接 ： http ： //codepen.io/anon/pen/EKoVOj？edit = 0010
index.html 的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">←</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">→</button>
</div>
<script src="script.js"></script>
</body>
</html>
style.css 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 的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())
);
});
});
解决方案3
0 2016-04-07 02:38:06
You need to create those buttons, and then bind a on click event to each. 您需要创建这些按钮，然后将点击事件绑定到每个按钮。 Inside these events, use window.scrollTo() or window.scrollBy() to achieve what you want. 在这些事件中，使用window.scrollTo（）或window.scrollBy（）来实现您想要的效果。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.