[英]Auto-scroll to a div when clicking on another div
When I click on one of the smaller div
s on the left (inside of the div
with the class "smallitems"
, I want for the div
on the right (with the class "items"
) to auto-scroll to the appropriate larger div
. 当我单击左侧较小的
div
之一(在类为"smallitems"
的div
内部)时,我想要右侧的div
(具有类"items"
)自动滚动到适当的较大div
。
HTML: HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery): JavaScript(使用JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example: 例:
This is before I click on a div
in the left div
( "smallitems"
). 这是我之前点击一个
div
左div
( "smallitems"
)。
I've now clicked on the number 5 ( <div class="col">5</div>
) in the left div
. 现在,我点击了左侧
div
的数字5( <div class="col">5</div>
)。 As you can see the right div
has scrolled to the 5th div ( <div class="item">5</div>
). 如您所见,右
div
已滚动到第五个div( <div class="item">5</div>
)。
Similar to the above, I've clicked on the number 4, and subsequently have had the right div
auto-scroll to the 4th div
. 与上面类似,我单击了数字4,随后将正确的
div
自动滚动到第4个div
。
see jfiddle http://jsfiddle.net/h7bLK/ 参见jfiddle http://jsfiddle.net/h7bLK/
This can be done with anchors. 这可以通过锚来完成。 If you replace your
div.col
s with anchor tags and add an ID to your div.item
s like this: 如果更换
div.col
锚标记S和添加ID到您的div.item
就像这样:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
BONUS : You'll be able to link externally to the correct item. 奖励 :您将可以从外部链接到正确的项目。
CONS : If the content is smaller than the frame it is rendered in, the whole frame will scroll. 缺点 :如果内容小于渲染的框架,则整个框架将滚动。
According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col"><a href="#one">1</a></div>
<div class="col"> <a href="#two">2</a> </div>
<div class="col last-child"><a href="#three">3</a></div>
<div class="col"><a href="#four">4</a></div>
<div class="col"><a href="#five">5</a> </div>
<div class="col last-child"><a href="#six">6</a> </div>
<div class="col"> <a href="#seven">7</a></div>
<div class="col"><a href="#eight">8</a></div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}
<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});
$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50. 当您向项目添加新的div时,其值为50。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.