2015-08-03 184 views
4

鏈接:https://jsfiddle.net/casas111/d32m7603/2/滾動溢出可見

我需要的溢出是可見的,但在同一時間,以便能夠從DIV中滾動它。

的jsfiddle代碼:

HTML:

<div class="screen"> 
<p class="content">Pellentesque habitant morbi 
    tristique senectus et netus 
    et malesuada fames ac turpis 
    egestas. Vestibulum tortor quam, 
    feugiat vitae, ultricies eget, 
    tempor sit amet, ante. Donec eu 
    libero sit amet quam egestas semper. 
    Aenean ultricies mi vitae est. Mauris 
    placerat eleifend leo. Aenean ultricies 
    mi vitae est. Mauris placerat eleifend leo 
    Pellentesque habitant morbi 
    tristique senectus et netus 
    et malesuada fames ac turpis 
    egestas. Vestibulum tortor quam, 
    feugiat vitae, ultricies eget, 
    tempor sit amet, ante. Donec eu 
    libero sit amet quam egestas semper. 
    Aenean ultricies mi vitae est. Mauris 
    placerat eleifend leo. Aenean ultricies 
    mi vitae est. Mauris placerat eleifend leo 
    Pellentesque habitant morbi 
     tristique senectus et netus 
     et malesuada fames ac turpis 
     egestas. Vestibulum tortor quam, 
     feugiat vitae, ultricies eget, 
     tempor sit amet, ante. Donec eu 
     libero sit amet quam egestas semper. 
     Aenean ultricies mi vitae est. Mauris 
     placerat eleifend leo. Aenean ultricies 
     mi vitae est. Mauris placerat eleifend leo 
</p> 
</div> 

CSS

.screen { 
    border-style: solid; 
    width: 200px; 
    height: 300px; 
    margin-left: 30%; 
    margin-top: 20%; 
    overflow: auto; 
} 

我已經看到了這一點:How to combine overflow:visible and overflow:scroll in CSS?

但沒有明確的答案。文本縮進是針對水平的情況。這是一個簡單的垂直情況。

編輯:

此代碼解決了隱藏滾動。我仍然無法顯示屏幕內容溢出。任何人?

.screen { 
    margin-left: 30%; 
    margin-top: 20%; 
    width: 190px; 
    overflow: hidden; 
    height: 100%; 
    border: 2px solid #000; 
} 
.content { 
    width: 200px; 
    height: 300px; 
    padding: 5px 10px 5px 5px; 
    overflow: auto; 
} 
.screen::-webkit-scrollbar { 
    display: none; 
} 
+0

的可能重複[如何結合溢出:可見和溢出:在CSS滾動](http://stackoverflow.com/questions/24230472/how-to-combine-overflowvisiblevisible-and-overflowscroll-in-css) – klaar

+0

@Alejandro你想隱藏滾動條嗎? – Suresh

+0

@eirenaios如果可能的話。雖然最初我只是需要它這樣工作。 – Alejandro

回答

1

人們尋找這一點。我寫了一個簡單的JQuery代碼來完成這個技巧! 享受

<html> 
<head> 
    <script src="js/jquery-2.1.4.min.js"></script> 
    <style> 
    .screen, 
    .content{ 
    top:200px; 
    left:200px; 
    width: 190px; 
    height: 300px; 
    position: absolute; 
    } 
    .screen { 
    border: 2px solid #000; 
    z-index: 10; 
    } 
    </style> 
    <script type="text/javascript"> 
    $(function(){ 
     $('.screen').bind('mousewheel', function(e){ 
      if(e.originalEvent.wheelDelta /120 > 0) { 
       console.log($(".content").position().top); 
       $(".content").css("top", $(".content").position().top+=5 ); 
      } 
      else{ 
       $(".content").css("top", $(".content").position().top-=5); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div class="screen"> 

    </div> 
    <div class="content">Pellentesque habitant morbi 
    tristique senectus et netus 
    et malesuada fames ac turpis 
    egestas. Vestibulum tortor quam, 
    feugiat vitae, ultricies eget, 
    tempor sit amet, ante. Donec eu 
    libero sit amet quam egestas semper. 
    Aenean ultricies mi vitae est. Mauris 
    placerat eleifend leo. Aenean ultricies 
    mi vitae est. Mauris placerat eleifend leo 
    Pellentesque habitant morbi 
    tristique senectus et netus 
    et malesuada fames ac turpis 
    egestas. Vestibulum tortor quam, 
    feugiat vitae, ultricies eget, 
    tempor sit amet, ante. Donec eu 
    libero sit amet quam egestas semper. 
    Aenean ultricies mi vitae est. Mauris 
    placerat eleifend leo. Aenean ultricies 
    mi vitae est. Mauris placerat eleifend leo 
    Pellentesque habitant morbi 
    tristique senectus et netus 
    et malesuada fames ac turpis 
    egestas. Vestibulum tortor quam, 
    feugiat vitae, ultricies eget, 
    tempor sit amet, ante. Donec eu 
    libero sit amet quam egestas semper. 
    Aenean ultricies mi vitae est. Mauris 
    placerat eleifend leo. Aenean ultricies 
    mi vitae est. Mauris placerat eleifend leo 
    </div> 
</body> 
</html> 

你可以看到它在這裏工作:https://jsfiddle.net/casas111/d32m7603/5/

0

你的代碼那麼好,只需要爲u要隱藏DIV的滾動條將在下文

<style> 
    .content { 
     width: 168px; 
     height: 300px; 
     padding: 5px 10px 5px 5px; 
    } 
    .content:hover{ overflow-x:scroll;} 
    </style> 


And full code are given below have a look 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
.screen { 
    margin-left: 30%; 
    margin-top: 20%; 
    width: 190px; 
    overflow: hidden; 
    height: 100%; 
    border: 2px solid #000; 
} 
.content { 
    width: 168px; 
    height: 300px; 
    padding: 5px 10px 5px 5px; 
} 
.screen::-webkit-scrollbar { 
    display: none; 
} 
.content:hover{ overflow-x:scroll;} 
</style> 
</head> 

<body> 
<div class="screen"> 
<p class="content">Pellentesque habitant morbi 
    tristique senectus et netus 
    et malesuada fames ac turpis 
    egestas. Vestibulum tortor quam, 
    feugiat vitae, ultricies eget, 
    tempor sit amet, ante. Donec eu 
    libero sit amet quam egestas semper. 
    Aenean ultricies mi vitae est. Mauris 
    placerat eleifend leo. Aenean ultricies 
    mi vitae est. Mauris placerat eleifend leo 
    Pellentesque habitant morbi 
    tristique senectus et netus 
    et malesuada fames ac turpis 
    egestas. Vestibulum tortor quam, 
    feugiat vitae, ultricies eget, 
    tempor sit amet, ante. Donec eu 
    libero sit amet quam egestas semper. 
    Aenean ultricies mi vitae est. Mauris 
    placerat eleifend leo. Aenean ultricies 
    mi vitae est. Mauris placerat eleifend leo 
    Pellentesque habitant morbi 
     tristique senectus et netus 
     et malesuada fames ac turpis 
     egestas. Vestibulum tortor quam, 
     feugiat vitae, ultricies eget, 
     tempor sit amet, ante. Donec eu 
     libero sit amet quam egestas semper. 
     Aenean ultricies mi vitae est. Mauris 
     placerat eleifend leo. Aenean ultricies 
     mi vitae est. Mauris placerat eleifend leo 
</p> 
</div> 
</body> 
</html> 
+0

沒有解決我的問題。當我滾動時,我需要看到溢出。另外,當我停止懸停時,它會重新安排到初始狀態。 – Alejandro

1

表示爲每您的評論有點校正。我已經應用簡單的CSS技巧。

我已通過採取該潛水的父容器的更小的寬度隱藏滾動條區域和用於該div施加overflow:hidden

檢查,工作得很好。

僅供參考Hide scroll bar, but still being able to scroll

.screen { 
 
    margin-left: 30%; 
 
    margin-top: 20%; 
 
    width: 190px; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    border: 2px solid #000; 
 
} 
 
.content { 
 
    width: 200px; 
 
    height: 300px; 
 
    padding: 5px 10px 5px 5px; 
 
    overflow: auto; 
 
} 
 
.screen::-webkit-scrollbar { 
 
    display: none; 
 
}
<div class="screen"> 
 
    <p class="content">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
    Mauris placerat eleifend leo. Aenean ultricies mi vitae est. Mauris placerat eleifend leo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit 
 
    amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aenean ultricies mi vitae est. Mauris placerat eleifend leo Pellentesque habitant morbi tristique senectus et netus et malesuada 
 
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aenean ultricies mi vitae est. Mauris 
 
    placerat eleifend leo 
 
    </p> 
 
</div>

+0

@Ajjandro這是你想要的嗎? – Suresh

+0

關閉,但不在那裏。我需要能夠看到內容溢出。我會測試你的代碼並回來。謝謝 – Alejandro

+0

有什麼建議嗎? :) – Alejandro