如何隐藏水平条并使左右按钮水平滚动？
还应该为手机启用滚动(启用触摸)。 我创建了一个 jsfiddle 我正在处理的标记。非常感谢。
<div class="ui grid container r-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment r-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="r-content">
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2143s1/watch.png">
</div>
</div>
<div class="rprod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/21s71/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2s4371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad r-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
最佳答案
由于并非所有浏览器都允许您设置滚动条的样式，因此我在父级上使用了 overflow-y:hidden; 来隐藏滚动条。您可以根据需要设置按钮的样式。我只是把它们放在底部。
演示:http://jsfiddle.net/hopkins_matt/muL9mrL1/1/
CSS:
/* featured column */
.ui.segment.i-feat-col {
overflow-y:hidden;
}
.i-feat-prod-row {
margin-top: 30px !important;
}
h4.ui.horizontal.divider.header {
color: #6CAF2B;
}
.i-feat-col {
height: 250px !important;
}
.i-prod-card {
width: 170px;
height: 170px;
position: relative;
display: inline-block;
background: #ffffff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 0.5rem 1em;
margin-top: auto;
padding: 1em 1em;
border-radius: 4px;
border: 1px solid rgba(34, 36, 38, 0.15);
top: 6px;
}
div.scroll {
height: calc(100% + 10px);
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling-x: touch;
}
div.scroll:hover {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.i-content {
white-space: nowrap;
}
.i-feat-header {
text-transform: capitalize;
font-size: 12px;
white-space: initial !important;
text-align: left;
line-height: 17px;
letter-spacing: normal;
padding-right: 11px;
padding-left: 11px;
clear: right;
}
.i-feat-header-price {
color: #F44336;
font-weight: 500;
font-size: 15px;
}
.i-feat-img {
display: block;
max-width: 140px;
width: auto;
height: auto;
}
.dimmable {
position: absolute;
}
JS:
$(function () {
$('.i-prod-card .image').dimmer({
on: 'hover'
});
});
function scrollHoz(dir) {
if (dir == 'L') {
$('.scroll').animate({
scrollLeft: "-=" + 250 + "px"
});
} else if (dir == 'R') {
$('.scroll').animate({
scrollLeft: "+=" + 250 + "px"
});
}
}
HTML:
<div class="ui grid container i-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment i-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="i-content">
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad i-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
<iframe class="i-frame-ad" src="http://admanager.ibay.com.mv/show.php?z=57" width="300" height="250" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
</div>
<button onclick="scrollHoz('L')">Left</button>
<button onclick="scrollHoz('R')">Right</button>
关于javascript - 如何隐藏水平条并使左右按钮水平滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32484043/